如何用CSS实现图片自适应显示而不拉伸或裁剪？-css教程-PHP中文网

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

聖光之護

发布： 2024-11-09 22:18:16

原创

1179人浏览过

如何用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实现图片自适应显示而不拉伸或裁剪？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS选择器能选择被禁用的元素吗_使用:disabled伪类控制样式 css transition-property属性如何应用在css中选择所有未被选中元素方法如何理解CSS属性的继承机制_CSS继承规则与优先级分析 CSS过渡元素的过渡函数如何选择_transition-timing-function应用