如何防止图像溢出 inline-block 容器

Question

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

我正在尝试设置一个 2 列处理，一侧是标题和文本，另一侧是图像。我在各自的容器 divs 中有我的图像和文本。 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>

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

How do I keep my image from overflowing an inline-block container