如何实现图像缩放时保持完整显示，不裁剪也不拉伸？

下面提供几种可行的方案，解决你遇到的图像缩放变形问题：

方案一：使用img标签 + object-fit: contain #

这种方案直接针对img标签设置，确保图片按比例完整显示，不裁剪也不拉伸：

修改后的代码 #

<div class="wrapper">
  <div class="bottom-shape-img">
    <img src="/static/media/bottom-shape.fc5ce966aeea4c482f4f5df0d5beec8c.svg" alt="BottomShapeImg">
  </div>
</div>

.wrapper {
  position: relative;
  width: 100%;
}

.bottom-shape-img {
  width: 100%;
  height: auto; /* 高度随图片比例自适应 */
}

.bottom-shape-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，完整显示在容器内 */
  display: block; /* 消除图片底部默认空白 */
}

说明：object-fit: contain会让图片按原始比例缩放，确保整个图片都能在容器内显示，不会出现拉伸或裁剪；容器高度设为auto，会根据图片比例自动调整，避免固定高度导致的变形。

方案二：调整background-image属性 #

如果你坚持用背景图的方式，可以替换background-size: cover为contain，并调整容器高度设置：

修改后的代码 #

.bar {
  background-image: url("../../img/home/bar-bottom.svg");
  background-repeat: no-repeat;
  background-size: contain; /* 完整显示背景图，保持比例 */
  background-position: center bottom; /* 将背景图定位到底部居中 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto; /* 去掉固定高度，让高度随背景图自适应 */
  min-height: 174.55px; /* 可选：设置最小高度，保证小屏幕下的基础显示 */
  /* 可选：用padding维持宽高比，比如图片宽高比为10:1，设置padding-bottom: 10% */
}

.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

说明：background-size: contain确保背景图完整显示，不会拉伸；配合background-position调整位置，自适应高度避免固定值导致的变形。

方案三：clip-path裁剪方案 #

如果你的图片是特定非矩形形状，可以用clip-path自定义裁剪区域，结合object-fit: cover实现需求：

修改后的代码 #

<div class="wrapper">
  <div class="bottom-shape-img">
    <img src="/static/media/bottom-shape.fc5ce966aeea4c482f4f5df0d5beec8c.svg" alt="BottomShapeImg">
  </div>
</div>

.wrapper {
  position: relative;
  width: 100%;
}

.bottom-shape-img {
  width: 100%;
  height: 174.55px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); /* 示例路径，需根据实际形状调整 */
  overflow: hidden;
}

.bottom-shape-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按比例填充容器 */
}

说明：先让图片用cover按比例填充容器，再通过clip-path裁剪出你需要的形状，既不会拉伸图片，也能精准控制显示区域。你需要根据实际图片形状调整polygon的坐标参数。

内容的提问来源于stack exchange，提问作者shkurta