使用CSS实现响应式图片和背景图
要使用CSS实现响应式图片和背景图，可以使用以下方法：1. 响应式图片：
使用`max-width`属性将图像的最大宽度设置为100%。这样，图像会自动根据其父元素的大小进行缩放。
设置`height`属性为`auto`，以确保图像的高度与宽度的比例保持一致。
img {
max-width: 100%;
height: auto;
}
2. 响应式背景图：
使用`background-size`属性将背景图的大小设置为`cover`或`contain`。
`cover`：背景图将被缩放到完全覆盖容器。可能会裁剪部分图像。
`contain`：背景图将被缩放到能够适应容器而不失真，但容器可能不会完全填满。
使用`background-position`属性控制背景图在容器中的位置。
.container {
background-image: url('path/to/image.jpg');
background-size: cover; /* 或 contain */
background-position: center center; /* 根据需要调整位置 */
}
以上是两种常用的方法，可根据具体需求进行调整。记得在HTML中引入CSS文件，并将相应的类应用于图像或容器元素。
页:
[1]