0

给定一个 div（或其他标签），是否可以在标签上方添加一个大的“响应式”图像（想想网站横幅），该图像具有最大宽度和高度，然后在高度调整时缩放以保持浏览器宽度的 100%自动只使用css？

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

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

方法一

使用 :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

方法二

使用 :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;
}

方法2的JSFiddle

方法三

我在某种程度上能够达到预期的效果，但 padding-top 取决于知道图像的高宽比。（我无法用 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;
}

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

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

方法3的JSFiddle

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

4

1 回答 1

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/

于 2012-10-11T21:56:10.233 回答