使用基于px的Parent的流体图像（使用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的固定宽度为500px，子图像的宽度为100％，因此图像将缩放以适合父容器。但是，由于.container具有固定宽度，因此在缩小或展开窗口时不会更改。

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

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