强制图像调整大小以适合 div

Question

我的页面的 CSS 遇到了一些问题，该页面显示社交媒体风格的帖子，包括图像。显示图像时，它们被放置在一个 div 标签内，该标签的样式旨在尝试减小图像的大小并水平显示图像。

但是，我遇到的问题是图像仍然试图堆叠在一起，我无法让它们按照我想要的方式调整大小，尤其是在移动设备上。目前基于这里的其他一些线程，这就是我所拥有的

.postImg{
    display: inline-block;
    height:100%;
    width:100%;
    object-fit: scale-down;
}

.postImgDiv{
    height: 100px;
}

Answer 1

您的图像占行宽的 100%。将其更改为：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tab"> <thead> <tr> <th> Test 1 </th> <th> Test 2 </th> <th> Test 3 </th> <th> Test 4 </th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> </tbody> </table>。

看看这个（你的情况）：

width: auto

.postImg{
    display: inline-block;
    height:100%;
    width:100%;
    object-fit: scale-down;
    border: 1px solid;
}

.postImgDiv{
    height: 100px;
}

修复后：

<div class="postImgDiv">
  <div class="postImg">A</div>
  <div class="postImg">B</div>
<div>

.postImg{
    display: inline-block;
    height:100%;
    width:auto;
    object-fit: scale-down;
    border: 1px solid;
}

.postImgDiv{
    height: 100px;
    text-align: center;
}