我有一个图像,我想显示为页脚的背景图像 . 它应该以所有屏幕尺寸的100%宽度显示,但是目前它在小屏幕中正确显示,而在大屏幕中,它仅显示在屏幕的中央,两侧都是空的,我不想要 .
这是我用来设置页脚Div的背景图像的Css:
.footer-shadow {
position:relative;
height: 237px;
margin-top:0px;
width: 100%;
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
color: gray;
}
请帮助我使页脚响应,以便图像调整所有屏幕大小 .
谢谢
3 回答
使用
background-size:cover;
属性可以拉伸图像以覆盖大小(包括裁剪区域)但在许多浏览器中可能无法正确显示,您需要为firefox和IE添加其他webkit参数,如下所示:更换
通过
如果您希望图像始终为100%宽,请使用以下CSS
这会自动生成背景图像 100% 的 width ,并相应地缩放高度 . 您当前使用
background-size: contain;
,将图像缩放为"the largest size such that both its width and its height can fit inside the content area."