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

Question

我有一个网站，我正在为客户建立一个网站。 一切都进展顺利，直到我遇到了一个看似简单的问题，但我以前从未遇到过并且找不到解决方案。

我正在尝试设置一个 2 列处理一侧的标题和文本，另一侧处理图像。 我在各自的容器 div 中有我的图像和文本。 div 的显示设置为“inline-block”，因此，图像不会缩小以适应它的 div。 有没有简单的解决方案？

这是代码：

HTML

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

图像将与父元素的最大宽度成比例增长。 如果您没有明确设置宽度，它将以其原始大小显示。