fluid - 带有基于 px 的父级的流体图像（使用 max-width="100%"）？

Question

我正在尝试将流畅的图像用于我正在从事的响应式项目。但是，我所看到的一切都只是告诉我为图像设置一个最大宽度，它应该可以工作。它确实有效，除了此处看到的基于 px 的容器宽度：http: //codepen.io/anon/pen/cCfsF

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

我的 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将响应窗口宽度的百分比宽度的情况，图像将相应地重新调整大小。

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