如何使图像最大宽度符合父 div 宽度的百分比？

Question

我有两个向左浮动 divs.. 一个宽度 = 20% 另一个宽度 = 80%

在这 20% 宽度内 div 我有一张宽度为 300px 的图像...

如果我的 20% 区域小于 300px，我想让我的图像调整大小并适合这 20% div...

像这样：

<div class="container">

   <div style="float:left; width:20%;">

       <img src="imageWith300pxWidth.jpg" />

   </div>

   <div style="float:left; width:80%;"></div>

</div>

Answer 1

.image {
  width: 100%;
  max-width: 300px;
}

如果您的容器宽度大于 300 像素，您的图片将固定为 300 像素；
如果您的容器宽度较小，则图像将调整大小以适应它

如何使图像最大宽度符合父 div 宽度的百分比？

How can I make an image max-width respect a percentage parent div width?

css

responsive-design