如何解决CSS背景图片高度自动被裁剪
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
这是我用来为div设置背景图像的CSS代码。我面临的问题是,达到特定的屏幕宽度(设备尺寸)时,图像高度会自动被裁剪。我该如何解决?
解决方法
您应该改用background-size: contain;
。但是在这种情况下,取决于图像分辨率(如果图像容器响应)和图像纵横比,顶部和底部或左侧和右侧将有空白空间。
如果您希望背景图像在不被裁剪的情况下占用尽可能多的空间,则可以像Merianos所说的那样使用它:
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-size: contain;
}
但是,如果您需要指定确切的宽度和高度,则可以将同一属性与百分比或像素一起使用。
.bg-image {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-size: 100px 100px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。