如何用CSS实现图片自适应显示而不拉伸或裁剪？

图片自适应不拉伸不裁剪显示的处理方式

当需要在网站或应用中展示尺寸不可控的图片时，如何保证图片能够自适应显示而不拉伸或裁剪，是一个常见的挑战。本文将提供一种简单有效的方法，使用 css 的 background-size 属性实现这一目标。

解决方案：直接应用 background-size: contain

使用 css 的 background-size: contain 属性，可以让图片在指定容器内保持原始宽高比，且填充整个容器。同时，它会避免图片拉伸或裁剪，从而保证了图片的完整性。

以下示例代码演示如何使用 background-size: contain:

.container {
    width: 500px;
    height: 300px;
    border: 1px solid #000;
}

.img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('./test.png');
}

<div class="container">
    <div class="img"></div>
</div>

在上述代码中，.container 元素定义了一个 500x300 像素的容器，而 .img 元素是一个背景图像容器，填充整个容器。当图像上传到 .img 元素时，图片会自动按 contain 规则显示，即保持原始宽高比并填充容器，而不会出现拉伸或裁剪。

通过使用 background-size: contain，可以轻松实现图片自适应显示而不拉伸或裁剪。这种方法适用于各种图片尺寸，并适用于大多数现代浏览器。

以上就是如何用CSS实现图片自适应显示而不拉伸或裁剪？的详细内容，更多请关注其它相关文章！