图片自适应不拉伸不裁剪显示的处理方式
当需要在网站或应用中展示尺寸不可控的图片时，如何保证图片能够自适应显示而不拉伸或裁剪，是一个常见的挑战。本文将提供一种简单有效的方法，使用 css 的 background-size 属性实现这一目标。
解决方案：直接应用 background-size: contain
使用 css 的 background-size: contain 属性，可以让图片在指定容器内保持原始宽高比，且填充整个容器。同时，它会避免图片拉伸或裁剪，从而保证了图片的完整性。
立即学习“前端免费学习笔记（深入）”；
千帆AppBuilder
百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。
174 查看详情
以下示例代码演示如何使用 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');}
在上述代码中，.container 元素定义了一个 500×300 像素的容器，而 .img 元素是一个背景图像容器，填充整个容器。当图像上传到 .img 元素时，图片会自动按 contain 规则显示，即保持原始宽高比并填充容器，而不会出现拉伸或裁剪。
通过使用 background-size: contain，可以轻松实现图片自适应显示而不拉伸或裁剪。这种方法适用于各种图片尺寸，并适用于大多数现代浏览器。
以上就是如何用CSS实现图片自适应显示而不拉伸或裁剪？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1157573.html
微信扫一扫 
支付宝扫一扫 
