css - 容器中的响应图像大小不正确

Question

我正在努力让图像在容器中响应，这让我发疯。我查看了许多不同的答案，唯一一个似乎有效的答案是将图像设置为容器宽度的 100%（不使用最大宽度），但我不想将图像设置为一直是 100%。这是我得到的：

HTML

<div id="interior_banner" class="title_pic">
<img src="assets/images/portraits_header-24.png" />
</div>

CSS：

img{max-width:100%;border:3px solid #fff}
.title_pic{text-align:center;margin:0 0 1em;}

现在将 img 设置为 width:100% 有效，但我真的希望这个横幅只有在它不适合容器时才能弯曲。在那之前我不想让它变大。

我错过了什么？我知道这是一件事。

提前致谢！

Answer 1

如果没有现场演示，这会有点困难，但我会尽力而为。

我认为你在正确的道路上。目前不是图像的常规宽度吗？当容器变得足够小时，它应该会收缩。但是如果容器比图像大，图像就不会按比例放大。

或者你想让图像放大吗？更多信息会很棒。