如何解决制作响应式时的背景图片问题
我在使背景图像具有响应性方面遇到了一些麻烦。它在桌面上运行良好。
body {
background:url(../Images/mountain.jpg) no-repeat;
background-size:cover;
}
当我不关心响应性时,这很好,非常适合窗口。但, 当我使窗口变小时,宽度保持完美,但图像的高度正在缩小,并且我得到了尴尬的白色背景。
height:100vh;
这很好,当我缩小时,我的图像高度与窗口完美对齐。尽管桌面和移动设备的图像也完美对齐,但当我缩小窗口时,我丢失了图像。它正在被裁剪。
我该怎么办?媒体查询是唯一的解决方案吗?除了使用不同图像的媒体查询,我还能做什么?
解决方法
您可以使用 background-size
属性。其接受的值为:
- contain :在其容器内尽可能大地缩放图像而不裁剪或拉伸图像
- cover :尽可能大地缩放图像以填充容器,必要时拉伸图像
当然它不能延伸到容器之外(例如,如果 body 元素没有占据整个页面,您可能需要为此添加 min-height: 100vh;
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。