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

【问题标题】：Fluid Images (using max-width="100%") with px-based Parent?带有基于 px 的父级的流体图像（使用 max-width="100%"）？
【发布时间】：2013-07-01 20:23:34
【问题描述】：

我正在尝试将流畅的图像用于我正在进行的响应式项目。但是，我所看到的一切都只是告诉我为图像设置一个最大宽度，它应该可以工作。它确实有效，除了此处看到的基于 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%;
}

【问题讨论】：

标签： fluid css fluid-images

【解决方案1】：

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

正如您所观察到的，对于 .container2 的百分比宽度会响应窗口宽度，图像将相应地重新调整大小。

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

【讨论】：