Question

这是一个奇怪的问题，因为我无法控制很多方面。我正在使用自定义图像轮播，其中图像是背景图像，包含div具有设置的宽度和高度（这些不能更改），但我可以操作背景位置和背景大小等内容。

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

background-size: 100%

将使用更宽的图像，而：

background-size: auto 100%

更适合较高的图像。

background-size: cover

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

Answer 1

您正在寻找contain value：

包含

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: