使图像适合其父元素 [英] Make an image fits its parent element

问题描述

我有一个垂直的div(宽度=身体的33％；高度=身体的100％)，其中包含图片.此图片应覆盖整个div，而不会失去宽高比.我现在使用height = 100％，但这将宽度扩展到了父母div之外.有任何想法吗?

I have an upright div (width = 33% of body; height = 100% of body) which contains an image. This image should cover the whole div without loosing its aspect ratio. I use height = 100% at the moment but that stretches the width beyond the parental div. Any ideas?

推荐答案

您可以使用背景图片来实现此目的，对background-size使用cover属性，例如:

You can achieve this with a background image instead, using the cover attribute for background-size, e.g.:

<div class="my-tall-div">
  <!-- no image tag needed any more -->
</div>

然后在您的CSS中:

.my-tall-div {
  background: url(/path/to/image.jpeg) center center no-repeat;
  background-size: cover;
}

这篇关于使图像适合其父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！