响应英雄图像作为CSS背景图像？
埃文斯
对于我的响应网站，我想将英雄图像作为背景图像而不是html中的图像。
我可以轻松地使div的宽度为100％，但是我不确定如何使它具有正确的高度。我必须以px为单位设置高度，但是所需的高度取决于div的宽度，该宽度随站点的响应而变化。
<div class="cont">
<p>Below is an image in the html that scales correctly</p>
<img src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" />
<p>The example below is a background image in CSS</p>
<div class="hero-img"></div>
<p>Some text</p>
</div>
.cont {
width: 20%;
margin: auto
}
img {
max-width: 100%;
}
.hero-img {
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") no-repeat;
background-size: 100% 100%;
height: 200px;
}
http://codepen.io/anon/pen/FBxkz
更新-背景尺寸的封面或包含内容无法解决我的问题。具有图片的div仍然具有固定的高度。
http://codepen.io/anon/pen/FCafi
SW4
更改background-size: 100% 100%;为background-size: cover;
有关background-size:coverMDN的更多信息
盖
此关键字指定背景图像应缩放到尽可能小，同时确保其尺寸都大于或等于背景定位区域的相应尺寸。
nb。根据下面Terry的评论，您可能还需要添加background-position: center center;以确保图像保持居中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
响应英雄图像作为CSS背景图像？
- 2
使CSS背景图像响应
- 3
使CSS背景图像响应
- 4
使背景图像响应
- 5
CSS响应式背景图像图
- 6
如何使CSS背景图像响应？
- 7
使CSS背景图像（SVG）响应
- 8
如何使CSS背景图像响应？
- 9
响应式缩放背景图像CSS
- 10
无法删除英雄图像底部的白条
- 11
在缩放时将英雄图像居中
- 12
Turbolinks将载波图像作为CSS背景图像
- 13
引用PrimeFaces图像资源作为CSS背景图像URL
- 14
WordPress的：使背景图像响应
- 15
如何使背景图像响应？
- 16
使背景图像响应流畅
- 17
SVG作为背景图像
- 18
SVG作为背景图像
- 19
CSS-div内的响应式背景图像
- 20
以编程方式添加CSS渐变作为背景图像
- 21
Polymer SVG作为CSS背景图像不起作用
- 22
如何使用CSS将文本颜色作为背景图像？
- 23
Polymer SVG作为CSS背景图像不起作用
- 24
背景图像路径css
- 25
使 CSS 背景图像滚动
- 26
Bootstrap 3溢出容器中的文本覆盖英雄图像
- 27
尝试使用reactjs和语义ui创建英雄图像
- 28
我的 div 文本隐藏在英雄图像后面
- 29
从图像对象输出图像URL作为背景图像
我来说两句