如何防止图像溢出内联块容器

Question

我有一个正在为客户制作的网站。一切都很顺利，直到我遇到了一个看似简单的问题，但我以前从未遇到过这个问题，也找不到解决方案。我正在尝试设置一个 2 列处理，一侧为标题和文本，另一侧为图像。我的图像和文本位于各自的容器 div 内。div 的显示设置为“inline-block”，因此图像不会缩小以适合其 div 内部。有一个简单的解决方案吗？这是代码：超文本标记语言<div class="col">    <h1>Header</h1>    <p>Text</p></div><div class="col">    <img src="images/img1.jpg" alt="Image"></div>CSS.col {    display: inline-block;    width: 45%;    vertical-align: top;    margin-bottom: 20px;}再说一次，我知道这可能非常简单（或者由于某种原因完全不可能），但任何帮助将不胜感激。

Answer 1

只需添加width: 100%到 CSS 中即可。

.col img {

  width: 100%;

}

或者你可以把它放在<img>标签中：

<div class="col">

    <img src="images/img1.jpg" alt="Image" width="100%">

</div>

图像将根据父元素的最大宽度按比例增长。如果您没有显式设置宽度，它将以其原始大小呈现。