缩放背景图像以适应标签上方的区域

时间:2012-10-11 21:21:07

标签: css css3

给定一个div(或其他标签),可以在标签(思考网站横幅)上方添加一个大的“响应”图像,该图像具有最大宽度和高度,然后进行缩放以保持浏览器宽度的100%,同时高度仅使用css自动调整?

我尝试了3种不同的方法,每种方法都有一个主要的缺点。这里的所有方法都是使用的html。而#nav是我试图添加上面图片的地方。

<ul id="nav">
    <li>link</li>
</ul>

方法1

使用:before和content:url(img);

CSS:

#nav:before {
    content:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg');
    width:100%;
    display:block;
    overflow:hidden;
}

此方法将保持高度正确,但如果我缩小屏幕尺寸,则会隐藏图像的右侧。我找不到合适缩放内容图片的方法。

JSFiddle of method 1

方法2

使用:before和background:url()我能够使图像正确缩放,但我无法更改高度值,这会给图像下方的区域带来巨大的区域。

#nav:before {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top;
    background-size:contain;
    width:100%;
    display:block;
    content:"";
    height:400px;
    max-height:480px;
}

JSFiddle of method 2

方法3

我有点能够达到预期的效果,但填充顶部取决于知道图像的高度与宽度的比例。 (我无法用css术语理解这是如何工作的以及为什么需要这种计算)。因此对于正方形图像,其X / X = 1或100%高度。对于480x780图像,它是61.53%

#nav {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top center;
    background-size:contain;
    padding-top:61.53%;
    width:100%;
    display:block;
    height:100px;
    overflow:hidden;
}

此方法确实产生了所需的结果,但我不能总是知道图像的高度和宽度。所以我正在寻找更好的解决方案。

我也意识到我可以为每个不同的大小和额外的图像创建媒体查询,但这是很多工作。

JSFiddle of method 3

有关如何改进其中一种方法的任何想法?

1 个答案:

答案 0 :(得分:0)

嗯,我希望我帮你。这是导航上方的图像,它总是100%宽(与浏览器大小相同)。它会在调整大小时向上和向下缩放,并自动计算高度,以便不影响宽高比:

HTML

<img class="banner" src="http://lorempixel.com/output/people-q-c-1200-200-9.jpg">
<ul>
    <li><a href="">link</a></li>
</ul>​

CSS

img.banner {
    width: 100%;
}​

小提琴

http://jsfiddle.net/7HgU8/