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

Question

我之前发布了一个问题并对其进行了编辑，但编辑后的版本没有显示正确的代码，因此我重新发布了该问题。当我调整浏览器窗口的大小时，图像似乎已经退出＆＃34;框＆＃34;或它的容器。我是编码的初学者，我知道如果我使用div而不是桌子会更好，但这是出于练习目的（而且，我需要它用于学校项目，我认为＆＃39;我想如何使用表元素）。无论如何，请帮我弄清楚该怎么做/如何修复代码。

编辑：我调整大小时看起来像this。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需更新图片css

即可

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

Answer 2

你只需要添加

width: 700px;

到你的职位课程：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

您的图片网址是您的图片＆＃39;绝对的网址 您的旧标记应该重定向点击的网址