css图片自适应

作者：黑白灰调发布日期:2025-11-23 浏览:15

/* CSS图片自适应 */

/* 方法1：使用max-width */
img {
    max-width: 100%; /* 图片的最大宽度为容器的100% */
    height: auto;    /* 高度自动调整，保持宽高比 */
}

/* 方法2：使用object-fit（适用于背景图片） */
.img-container {
    width: 100%;
    height: 300px; /* 固定高度或根据需求设置 */
    background-image: url('your-image.jpg');
    background-size: cover; /* 背景图片覆盖整个容器并保持宽高比 */
    background-position: center; /* 图片居中 */
}

解释说明：

方法1：通过设置 max-width: 100% 和 height: auto，确保图片在不同屏幕尺寸下能够自适应容器的宽度，并且保持原始的宽高比。这种方式适用于直接插入HTML中的<img>标签。
方法2：适用于背景图片，使用 background-size: cover 可以让背景图片覆盖整个容器区域，同时保持宽高比，不会失真。background-position: center 确保图片居中显示。

上一篇：css 水平居中

下一篇：css动画库