使图像适合其父元素

Question

我有一个直立的div（宽度=身体的33％;身高=身体的100％），其中包含一个图像。此图像应覆盖整个div ，而不会丢失其宽高比。我目前使用高度= 100％但是伸展超出父母div的宽度。有任何想法吗？

Answer 1

您可以使用背景图片来实现此目的，使用cover的{​​{1}}属性，例如：

background-size

然后在你的CSS中：

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

Answer 2

我认为这是最小宽度：100％;或设置您网站的像素。然后它也会响应

Answer 3

实际上你仍然可以使用@toomanyredirects答案。

只需调整它，以便将类设置为<img>标记。

.imgCover
{ 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

并像这样使用它：

<img class="imgCover" ... >