根据高度和宽度之间的最大值更改背景图像尺寸

Question

我有一个滑块，可以显示一组不同尺寸的图像。对其中一些来说，宽度比高度大得多，对其中一些人来说，高度比宽度大得多。对于其中一些人，高度和宽度几乎相同。

图像被显示为ul列表内的li标签的背景。

<ul class="gallery_container">
    <li style="background:url(link1) no-repeat;"></li>
    <li style="background:url(link2) no-repeat;"></li>
    <li style="background:url(link3) no-repeat;"></li>
    <li style="background:url(link4) no-repeat;"></li>
</ul>

带css

.gallery_container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.gallery_container li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    background-position: center !important;
}

我想以这样一种方式显示图像，即

1. 背景图像显示在中央；即，如果背景图像的宽度或高度小于ul的宽度或高，则它必须位于ul的中心
2. 背景图像不会超出其容器；即ul边界。即使图像的宽度或高度比容器的大，图像也不能超出ul的边界
3. 高度和宽度之间的比率必须是恒定的；高度的任何增加都必须伴随着宽度的增加，其比例与原始尺寸相同
4. 如果背景图像的宽度大于其高度，则其宽度必须为100%
5. 如果背景图像的高度大于其宽度，则其高度必须为100%

我想做的事

• 为了使背景图像居中，我使用了background-position: center !important;
• 我试着使用background-size: cover;，但它没有按我的意愿工作，图像被水平和垂直地刮到100%，我想保存高度和宽度之间的比率
• 我尝试设置background-size: auto 100%，但这并不能解决第四个要求；如果宽度大于高度，它的宽度不会是100%，只有它的高度在所有情况下都是100%
• 我尝试设置background-size: 100% auto，但这并不能解决第五个要求；如果高度大于宽度，那么它的高度不会是100%，只有在所有情况下它的宽度才会是100%

我的问题

当背景图像的宽度大于高度时，我应该修改什么以使其宽度为100%，反之亦然？

Answer 1

您想要使用background-size: contain，它将最大化图像的最大侧，并保持纵横比。

背景大小：包含

一个关键字，可以将图像缩放到尽可能大的范围，并保持图像纵横比（图像不会被压扁）。图像在容器中用信箱包装。当图像和容器具有不同的尺寸时，空白区域（左/右的顶部/底部）将填充背景色。除非被其他特性（如背景位置）覆盖，否则图像会自动居中。

Answer 2

如果不是因为用户看到图像无法到达的div或ul的背景，那么您可以选择background-size:contain;

这将保存背景图像的纵横比，您可以通过background-position:center和background-repeat:no-repeat 将其居中

这将解决你的问题。