使用 CSS 的可缩放背景图像

Question

我有一个高度为 300 像素的 div。我想要一个或多个根据这个高度缩放的子图像。

当我使用带有下面#src CSS 的img 时，效果很好。宽度和高度未定义为像素分辨率，因此如果我更改了#wrap 的高度，它会按应有的比例缩放。

是否可以在不定义像素宽度/高度的情况下对 CSS 背景（无 Javascript）做同样的事情？我可以将宽度设置为 100% 并在其中放置一个最大宽度，但这会将图像限制为最大宽度，如果图像小于最大宽度，则右侧会有一个间隙（可以根据 max-width 的值很大）。

谢谢！

#wrap
{
    width:100%;
    height:300px;
}

#src
{
	display:inline-block;
	width:auto;
	height:100%;
	border:1px #0f0 solid;
}
    
#bg
{
	display:inline-block;
	background-image:url(https://i.imgur.com/6672G7J.png);
	background-repeat:no-repeat;
	background-size:contain;
	width:auto;
	height:100%;
	border:1px #f00 solid;
}

<div id="wrap">
	<img id="src" src="https://i.imgur.com/6672G7J.png" />
	<div id="bg"></div>
</div>

Answer 1

如果我理解正确...您可以使用background-size: cover;，然后图像将填满整个父容器，而无需指定宽度或高度

Answer 2

您是否正在寻找 background-size: cover 应用最大尺寸而不是较小尺寸？

Answer 3

诀窍是将 div 的高度设置为 0，然后将 padding-top 设置为高度/宽度的比率。见https://stackoverflow.com/a/22211990/40161

#bg
{
    display:inline-block;
    background-image:url(https://i.imgur.com/6672G7J.png);
    background-repeat:no-repeat;
    background-size:contain;
    width:100%;
    height:0;
    padding-top: 100%; (Height/Width)
    border:1px #f00 solid;
}

注意：我将宽度更改为 100%。这将使其占用所有可用空间。但是，如果您希望它 100px 作为原始示例，则需要围绕 div 进行包装以限制大小。见https://jsfiddle.net/1x6p33f9/1/