css 如何使背景自适应宽高且不变形

要让CSS背景自适应宽高且不变形，可以使用以下的CSS代码：

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

其中，`background-image`属性用于设置背景图片的URL地址，`background-size: contain`用于让背景图片自适应宽高，但是不会变形，`background-position: center`用于将背景图片居中显示，`background-repeat: no-repeat`用于让背景图片不重复显示。通过以上的CSS代码，就可以实现CSS背景自适应宽高且不变形的效果。

相关问题

css 背景图自适应高度

要实现CSS背景图的自适应高度，你可以使用background-size属性。下面是一种常见的方法：

.container {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
}

在这个例子中，你需要给包含背景图的容器元素一个相对或绝对定位，并且设置其高度为100%以确保它占满整个父容器的高度。

接下来，background-size属性用于调整背景图的尺寸。使用cover值会让背景图等比例缩放，保持其完全覆盖容器，并且可能超出容器的边界。

最后，background-position属性用于指定背景图的位置。在这个例子中，使用center值将图像水平和垂直居中。

使用这种方式，背景图将会自适应容器的高度，并且保持其宽高比例，从而实现自适应高度的效果。

css背景自适应大小

要实现CSS背景的自适应大小，可以使用`background-size`属性来控制背景图片的尺寸。以下是一些常用的方法：

1. 使用百分比：设置`background-size`为百分比值，可以根据父元素的大小进行缩放。例如，将`background-size`设置为100% 100%可以使背景图片充满整个父元素。

div {
  background-image: url('background-image.jpg');
  background-size: 100% 100%;
}

2. 使用`cover`关键字：将`background-size`设置为`cover`可以保持背景图片的宽高比例，并尽可能填充整个父元素。如果父元素比例与背景图片比例不一致，则会进行裁剪。

div {
  background-image: url('background-image.jpg');
  background-size: cover;
}

3. 使用`contain`关键字：将`background-size`设置为`contain`可以保持背景图片的宽高比例，并尽可能完整地显示在父元素中。如果父元素比例与背景图片比例不一致，则会有留白。

div {
  background-image: url('background-image.jpg');
  background-size: contain;
}

通过这些方法，你可以根据需要选择最合适的方式来实现CSS背景的自适应大小。