Question

给定一个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

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

Answer 1

嗯，我希望我帮你。这是导航上方的图像，它总是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/

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

方法1

方法2

方法3

1 个答案:

HTML

CSS

小提琴