具有基于 px 的父级的流体图像(使用最大宽度 ="100%")？

Question

我正在尝试将流体图像用于我正在处理的响应式元素。然而，我所看到的一切都告诉我为图像设置一个最大宽度，它应该可以工作。它确实有效，但基于像素的容器宽度除外，如下所示:http://codepen.io/anon/pen/cCfsF

基于px的 parent 是否有可能拥有流畅的图像？

我的 HTML 代码是:

<div class="container">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>

我的 CSS 是:

.container {
  width: 500px;
  background: #f30;
}
.container2 {
   width: 100%; 
    background: #f30;
}
img {
  max-width: 100%;
}

Answer 1

在您的示例中，.container 的固定宽度为 500 像素，子图像的宽度为 100%，因此图像将缩放以适合父容器。但是，由于 .container 具有固定宽度，因此它不会随着您缩小或展开窗口而改变。

如您所见，对于 .container2 的百分比宽度将响应窗口宽度，图像将相应地调整大小。

您看到的是正确的行为，因此对您的问题的简短回答是否定的，至少对于您正在查看的布局而言。