首页 文章

CSS可缩放的背景图像

提问于
浏览 次
1

我有一个高度为300px的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>
html css html5 css3

3 回答

  • 0

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

    回复于
  • 0

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

    回复于
  • 0

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

    回复于

相关问题