给定一个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;
}
此方法将保持高度正确,但如果我缩小屏幕尺寸,则会隐藏图像的右侧。我找不到合适缩放内容图片的方法。
使用: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;
}
我有点能够达到预期的效果,但填充顶部取决于知道图像的高度与宽度的比例。 (我无法用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;
}
此方法确实产生了所需的结果,但我不能总是知道图像的高度和宽度。所以我正在寻找更好的解决方案。
我也意识到我可以为每个不同的大小和额外的图像创建媒体查询,但这是很多工作。
有关如何改进其中一种方法的任何想法?
答案 0 :(得分:0)
<img class="banner" src="http://lorempixel.com/output/people-q-c-1200-200-9.jpg">
<ul>
<li><a href="">link</a></li>
</ul>
img.banner {
width: 100%;
}