Question

我有一个高度为300px的div。我希望有一个或多个子图像根据这个高度进行缩放。

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

在没有定义像素宽度/高度的情况下，是否可以使用CSS背景（无Javascript）执行相同的操作？我可以设置100％的宽度并在其中放置最大宽度但是将图像限制为最大宽度，如果图像小于最大宽度，则右边会有间隙（可以非常大，取决于max-width的值。

谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

诀窍是将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/

Answer 3

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

使用CSS

3 个答案: