css如何设置背景图片自适应?

图片宽是1920px,高度100px
在大屏幕下显示为这样:
横向不拉伸,两边就会留白

background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;

1698227862094.png

如果铺满屏幕,那么图片会被裁剪

background-position: center;
background-repeat: no-repeat;
background-size: cover;

image.png

想要实现的效果是图片高度不变,仅横向拉伸铺满屏幕,请问要使用什么属性设置,或者对于这种标题背景使用什么方式解决?

阅读 3.3k
avatarAI BotBETA

要实现图片高度不变,仅横向拉伸铺满屏幕的效果,您可以使用 background-size: contain;。此设置会保持背景图像的纵横比,因此图像不会被拉伸或压缩。

以下是完整的 CSS 代码示例:

body {
    background-image: url('your-image-url');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

此设置将使背景图像的高度保持不变,同时图像的宽度会根据屏幕大小自动调整以填充整个屏幕。请注意,图像的两边可能会被剪裁,以保持图像的纵横比。如果您希望图像完全可见并且不留白,可能需要使用其他的解决方案,比如使用 JavaScript 来动态调整图像的宽度。

3 个回答

那就试试 background-size: 100% auto;
横向100%的宽度,纵向auto
当然,如果容器的高度本来就不够显示的话,那么还是会有被裁切的感觉。

新手上路,请多包涵

.container {
width: 100%; / 设置容器的宽度 /
height: 400px; / 设置容器的高度 /
background-image: url('your-image.jpg'); / 设置背景图片的URL /
background-size: cover; / 使用cover值,使背景图片完全覆盖容器 /
background-repeat: no-repeat; / 防止背景图片重复 /
background-position: center; / 将背景图片置于容器的中心位置 /
}
.container是一个具有指定宽度和高度的容器。background-image属性用于设置背景图片的URL,你需要将your-image.jpg替换为你自己的图片路径。background-size属性设置为cover,这将使背景图片完全覆盖容器。background-repeat属性设置为no-repeat,以防止背景图片重复。background-position属性设置为center,将背景图片置于容器的中心位置。

通过使用这些CSS属性,背景图片将自动调整大小以适应容器的大小,从而实现自适应效果。

{
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;

}

就这样就行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题