通过将图像高度设置为容器高度，使图像适合其容器 [英] make an image fit its container by setting the image height to the containers height

问题描述

说我有container.a，它有一些高度的像素，说我有另一个container.b在container.a，这是80％的container.a，现在说，我想要适合一个高度的图像像素到container.b中，如何使图像成为container.b的高度，然后使用css保持宽高比？

say i have container.a and it has some height in pixels, say i have another container.b within container.a that is 80% of container.a, now say i want to fit an image that has some height in pixels into container.b, how can i make the image be the height of container.b, and then maintain the width aspect ratio using 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 { ? }

推荐答案

Give 100% width of image

 .image.a{width:100%;}

这篇关于通过将图像高度设置为容器高度，使图像适合其容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！