如何解决小红书模块中图片拉伸或裁剪问题？

无拉伸、无裁剪图片显示解决方案

在制作类似模块时，需要处理用户上传图片的尺寸差异，以避免拉伸或裁剪。

处理方法：

1. 设定容器尺寸：设定一个限定图像大小的容器，例：宽度500px、高度300px。
2. 设置背景图像：在容器内使用 元素作为图像占位符，并设置 background-size: cont n 属性。该属性将图像按原始宽高比缩放，以完全填充容器而不拉伸或裁剪。
3. 设置背景定位：使用 background-position: center 属性将图像居中对齐。
4. 禁用背景重复：设置 background-repeat: no-repeat 属性，以避免图像在容器内重复。
5. 添加背景图片：使用 background-image 属性指定要显示的图像。

示例代码：

.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>

登录后复制

通过以上处理，图片将全部以原始宽高比显示，在容器内居中对齐，不会出现拉伸或裁剪。