通过将图像高度设置为容器高度，使图像适合其容器答案

【问题标题】：Make an image fit its container by setting the image height to the containers heights通过将图像高度设置为容器高度，使图像适合其容器
【发布时间】：2013-04-08 21:19:54
【问题描述】：

假设我有 container.a，它有一些以像素为单位的高度，假设我在 container.a 中有另一个 container.b，它是 container.a 的 80%，现在说我想适应一个有一定高度的图像像素到container.b，如何使图像成为container.b的高度，然后使用CSS保持宽度纵横比？

<div class="container.a">
  <div class="container.b">
    <img class="image.a" src="my_image.png" />
  </div>
</div>

.container.a { width: 200px; height: 300px; }
.container.b { width: 80%; height: 80%; }
.image.a { ? }

【问题讨论】：

标签： css image aspect-ratio

【解决方案1】：

使用这个：

.image.a { height:100%; width:auto }

【讨论】：

【解决方案2】：

给图片100%的宽度

 .image.a{width:100%;}

【讨论】：