将不同尺寸的图像完全适合相同大小的 div答案

【问题标题】：Fully fit images with different dimensions into the same sized div将不同尺寸的图像完全适合相同大小的 div
【发布时间】：2015-05-17 23:41:33
【问题描述】：

这很奇怪，因为我无法控制很多方面。我正在使用自定义图像轮播，其中图像是背景图像，并且包含的 div 具有设置的宽度和高度（这些无法更改），但我可以操纵诸如背景位置和背景大小之类的东西。

问题来自不同纵横比的图像。如果我只是尝试操纵宽度和高度，图像会被裁剪。尝试类似：

background-size: 100%

适用于更宽的图像，同时：

background-size: auto 100%

更适合较高的图像。

background-size: cover

裁剪两种尺寸，在一个完美的世界里，我想找到一个纯 CSS 的解决方案。有没有人对如何使两种纵横比的图像完全适合相同大小的 div 有任何想法？

【问题讨论】：

标签： html css image

【解决方案1】：

您正在寻找contain value：

包含

此关键字指定背景图像应为缩放到尽可能大，同时确保其尺寸小于或等于相应的尺寸背景定位区域。

body > div {
  height: 500px;
  width: 500px;
}

.tall {
  background: #F00 url(http://www.placehold.it/500X1000) center no-repeat;
  background-size: contain;
}
.wide {
  background: #F90 url(http://www.placehold.it/1000X500) center no-repeat;
  background-size: contain;
}

<h2>I contain a tall image!</h2>
<div class="tall"></div>

<h2>I contain a wide image!</h2>
<div class="wide"></div>

【讨论】：