Question

我有一个滑块，如果具有不同尺寸的图像，则显示一组。对于其中一些宽度比高度大得多，因为其中一些高度比宽度大得多，而且其中一些高度和宽度几乎相同。

图片显示为li列表中ul标记的背景。

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

我希望以某种方式显示图像

背景图像显示在中央;即。如果背景图片的宽度或高度小于ul的宽度或高度，则它必须位于ul的中心。
背景图片不会从它的容器中出来;即。 ul边界。即使图像的宽度或高度大于包含图像，图像也不得超出ul的边框。
高度和宽度之间的比例必须是恒定的;任何高度的增加必须伴随着原始尺寸的相同比例增加宽度。
如果背景图片的宽度大于其高度，则其宽度必须为100%
如果背景图片的高度大于宽度，则其高度必须为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哪个会将图像最大化到最大边，并保持纵横比。

background-size：包含

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（如background-position）覆盖，否则图像会自动居中。

Answer 2

如果不是问题，如果用户看到图像无法到达的div或ul的背景，那么你可以去background-size:contain;

这会保存背景图片的宽高比，您可以将其居中background-position:center和background-repeat:no-repeat

这将解决您的问题。

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

我试图做的事情

我的问题

2 个答案: