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

Question

我之前发布了一个问题并对其进行了编辑，但编辑后的版本没有显示正确的代码，所以我重新发布了它。当我调整浏览器 window 大小时，图像似乎超出了 "box" 或其容器。我是编码的初学者，我知道如果我使用 div 而不是 table 会好得多，但这是为了练习目的（而且，我需要它用于学校项目，我认为这是我想如何使用 table 元素）。不管怎样，请帮我弄清楚该怎么做/如何修复代码。

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

.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

只更新图片css

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

Answer 2

您只需添加

width: 700px;

给你的 post class:

.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 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 你的旧标签的 HREF url 应该在点击时重定向的地方

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

How to prevent the table and image elements from moving when resizing browser window [REPOST]

html

css

layout

resize

css

html