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

Question

I previously posted a question and edited it but the edited version does not show the correct code so I'm reposting it. When I resize my browser window, the images seem to go out of the "box" or it's container. I'm a beginner at coding and I know it's much better if I use div instead of table, but this is for practice purposes (and also, I need it for a school project and I figured that's how I want to use the table element). Anyways, please help me figure out what to do/ how to fix the code.

EDIT: Looks like this when I resize.

 .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

Just update the image css

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

Answer 2

You just need to add

width: 700px;

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

As you already admit that the html structure is not good (better say should be avoided), still I am trying to introduce a different approach.

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>

YOUR IMAGE URL is your images' absolute urls YOUR HREF OF OLD A TAG the url's where the it should be redirected on click