如何在不拉伸或裁剪的情况下显示图片？
对于你所提到的问题，即在所有尺寸的图片中自适应显示图片而不拉伸或裁剪，我们可以使用 css 中的 background-size: contain 属性。
以下是实现此效果的代码示例：
.container {
/* 容器大小 */
width: 500px;
height: 300px;
border: 1px solid #000;
}
.img {
/* 100% 宽度和高度 */
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>这样，无论上传图片的尺寸如何，它都将以原始比例显示，并填充可用的容器空间，同时保持居中。
以上就是如何让图片在不同尺寸容器中自适应显示，且不拉伸或裁剪？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
999
