Css实现图片宽高自适应等比例缩放的方式和使用场景

2 years ago

source link: https://www.fly63.com/article/detial/12408
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Css实现图片宽高自适应等比例缩放的方式和使用场景

更新日期: 2023-03-17阅读: 47标签: 图片分享

扫一扫分享

css实现图片宽高自适应等比例缩放的方式有以下几种：

使用 object-fit 属性，可以指定图片的内容如何适应容器的宽高。例如，object-fit: contain 可以让图片保持原始比例并完整显示在容器内，object-fit: cover 可以让图片保持原始比例并填充整个容器，多余的部分会被裁剪。
使用 max-width 和 max-height 属性，可以限制图片的最大宽度和高度，并让其自动缩放到合适的大小。例如，如果容器的宽高都是 300px，而图片的原始宽高是 600px * 400px，则设置 max-width: 100%; max-height: 100%; 可以让图片缩放到 300px * 200px。
使用 padding-top 或 padding-bottom 属性，可以根据容器的宽度来计算出合适的高度，并使用背景图来显示图片。例如，如果图片的原始宽高比是 16:9，则设置 padding-top: 56.25%; background-image: url(...); background-size: cover; background-position: center; 可以让图片等比例缩放并填充整个容器。

具体使用哪种方式取决于你想要达到什么效果和兼容性要求。你可以参考以下代码示例：

/* 使用 object-fit */
.img-container {
    width: 300px;
    height: 300px;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 或者 cover */
}

/* 使用 max-width 和 max-height */
.img-container {
    width: 300px;
    height: 300px;
}

.img-container img {
    max-width: 100%;
    max-height: 100%;
}

/* 使用 padding-top 或 padding-bottom */
.img-container {
    width: 300px;
    padding-top: calc(9 / 16 * 100%); /* 根据宽高比计算出合适的百分比 */
    background-image: url(...);
    background-size: cover;
    background-position: center;
}

这3种方式分别使用的场景如下：

使用 object-fit 属性，适合于图片的原始宽高比和容器的宽高比不一致，且需要保持图片完整显示或填充容器的情况。例如，一个新闻网站的列表页，每个新闻项都有一个固定大小的图片缩略图，但是原始图片的大小和比例各不相同，这时可以使用 object-fit: contain 或 object-fit: cover 来实现图片等比例缩放。
使用 max-width 和 max-height 属性，适合于图片的原始宽高比和容器的宽高比一致或接近，且需要让图片自动适应容器大小的情况。例如，一个相册网站的详情页，每张图片都有一个固定宽度的容器，但是原始图片的高度不确定，这时可以使用 max-width: 100%; max-height: 100%; 来实现图片等比例缩放。
使用 padding-top 或 padding-bottom 属性，适合于需要根据容器宽度来动态计算高度，并使用背景图来显示图片的情况。例如，一个视频网站的首页轮播图，每张轮播图都有一个固定宽高比（如16:9），但是随着屏幕大小变化而变化，这时可以使用 padding-top: calc(9 / 16 * 100%); background-image: url(...); background-size: cover; background-position: center; 来实现图片等比例缩放。

链接: https://www.fly63.com/article/detial/12408

Recommend