目录

图片满屏自适应宽度自适应，高度固定，图片充满父元素

图片满屏自适应

在前端开发过程中，我们经常遇见需要对图片进行处理，其中图片满屏的需求非常常见。而图片满屏只需要调整Css样式即可，现下我就做一个记录。

.flight-container{

margin: 0;

width: 100%; /* 容器宽度占满屏幕 */

height: 100vh; /* 容器高度占满视口高度 */

background-image: url('@/assets/images/banner/banner背景图.png'); /* 设置背景图片 */

background-size: cover; /* 覆盖整个容器，图片可能会被裁剪以填满容器 */

background-position: center; /* 图片居中显示 */

}

宽度自适应，高度固定，图片充满父元素

因为图片本身尺寸和屏幕尺寸比例不一致。这里通过background-size属性设置。

background-size CSS 属性用于指定背景图像的尺寸。有几种参数类型

A% B%; 您实际上是在为背景图像指定了两个独立的尺寸参数，分别对应图像的宽度和高度。 第一个参数 A%表示背景图像的宽度应该被拉伸或缩放以完全覆盖其容器的宽度。第二个参数 B%表示背景图像的高度也应该被拉伸或缩放以完全覆盖其容器的高度。换句话说，无论背景图像的原始尺寸如何，它的宽度都将被调整为与元素（如 div、body 等）的宽度相同。 这种设置通常用于确保背景图像能够完全覆盖其所在的元素，无论元素的尺寸如何变化。然而，需要注意的是，这种拉伸可能会导致背景图像看起来扭曲，特别是当图像的原始宽高比与容器的宽高比不匹配时。 cover; cover 可以确保背景图像完全覆盖背景区域且保持图像的宽高比不变，但可能会裁剪图像。 contain; contain 确保背景图像完全包含在背景区域内，图像将被缩放以完全适应背景区域，但可能不会完全覆盖它。

.flight-container{

margin: 0;

width: 100%;

height: 900px;

background-image: url('@/assets/images/FlightInspection/飞视巡检背景图.png'); /* 设置背景图片 */

background-size: 100% 100%; /* 背景图宽度为100%，高度自动调整以保持宽高比 */

background-position: center; /* 图片居中显示 */

background-repeat: no-repeat; /* 不重复背景图 */

overflow: hidden; /* 隐藏超出容器的背景图部分（但在这个场景下其实不需要，因为background-image不会超出容器） */

}