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

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 {&nbsp; width: 100%;}或者你可以把它放在<img>标签中：<div class="col">&nbsp; &nbsp; <img src="images/img1.jpg" alt="Image" width="100%"></div>图像将根据父元素的最大宽度按比例增长。如果您没有显式设置宽度，它将以其原始大小呈现。