如何在调整浏览器窗口大小时防止表和图像元素移动[REPOST]

Question

我之前发布了一个问题并编辑了它，但是编辑的版本没有显示正确的代码，所以我重新发布它。当我调整浏览器窗口的大小时，图像似乎从“框”中消失了，或者是容器。我是一个编码初学者，我知道如果我使用div而不是table更好，但这是为了实践目的(而且，我也需要它用于一个学校项目，我想这就是我想使用table元素的方式)。无论如何，请帮我弄清楚该怎么做/如何修复代码。

编辑:当我调整大小时，看起来像这。

​

.post {
  padding: 3em 3em 1em 3em;
  background: #ffffff;
  border: solid 1px rgba(160, 160, 160, 0.3);
  margin: 0 0 3em 0;
  position: relative;
}

.post>header {
  display: flex;
  border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  left: -3em;
  margin: -3em 0 3em 0;
  position: relative;
  width: calc(100% + 6em);
}

.post>header .title {
  flex-grow: 1;
  flex: 1;
  padding: 3.75em 3em 3.3em 3em;
}

.post>header .title h2 {
  font-weight: 900;
  font-size: 1.5em;
  text-align: center;
}

.post>header .title> :last-child {
  margin-bottom: 0;
}

.image {
  width: 200px;
  height: 260px;
}

table {
  margin-left: auto;
  margin-right: auto;
}

td {
  padding: 10px;
}

.group {
  margin-left: auto;
  margin-right: auto;
}

<article class="post">
  <header>
    <div class="title">
      <h2><a href="#">Favorite Books</a></h2>
    </div>
  </header>


  <table>
    <tr>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
  </tr>                          
  </table>
  
 </article>

​

Answer 1

你只需要加上

width: 700px;

去你的邮递班：

​

.post {
  padding: 3em 3em 1em 3em;
  background: #ffffff;
  border: solid 1px rgba(160, 160, 160, 0.3);
  margin: 0 0 3em 0;
  position: relative;
  width: 700px;
}

.post>header {
  display: flex;
  border-bottom: solid 1px rgba(160, 160, 160, 0.3);
  left: -3em;
  margin: -3em 0 3em 0;
  position: relative;
  width: calc(100% + 6em);
}

.post>header .title {
  flex-grow: 1;
  flex: 1;
  padding: 3.75em 3em 3.3em 3em;
}

.post>header .title h2 {
  font-weight: 900;
  font-size: 1.5em;
  text-align: center;
}

.post>header .title> :last-child {
  margin-bottom: 0;
}

.image {
  width: 200px;
  height: 260px;
}

table {
  margin-left: auto;
  margin-right: auto;
}

td {
  padding: 10px;
}

.group {
  margin-left: auto;
  margin-right: auto;
}

<article class="post">
  <header>
    <div class="title">
      <h2><a href="#">Favorite Books</a></h2>
    </div>
  </header>


  <table>
    <tr>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
      <td>
        <a href="#" target="_blank"><img src="#" alt="#" class="image" /> </a>
      </td>
  </tr>                          
  </table>
  
 </article>

​

Answer 2

只需更新图像css

.image {
  display: block;
height: auto;
max-width: 100%;
}

Answer 3

正如您已经承认html结构不好(最好说应该避免)，我仍然试图引入一种不同的方法。

css

td{
 /*append this style along yours*/
 height:200px;
 width:200px;
 display:block;
}

html

<td style="background-image: url('YOUR IMAGE URL');background-repeat: no-repeat;background-attachment: fixed;background-position: center;" onclick="javascript:window.location = 'YOUR HREF OF OLD A TAG'">
    &nbsp;
  </td>

您的图像URL是您的图像的绝对url，是旧的A标记的，url的位置应该在单击时重定向