如何用CSS在移动端裁剪图片？解决100vh设置后的拉伸变形问题

嗨，我来帮你搞定这个图片适配的困扰！你的核心问题是4:3比例的图片在桌面端用100vh全屏显示没问题，但移动端同样设置会拉伸变形。下面分两种方案给你讲解：

一、裁剪方案：保留中间部分，避免拉伸 #

如果你希望在移动端让图片高度占满100vh，同时裁剪左右多余部分（默认居中保留中间），最简洁的方式是使用CSS的object-fit属性，它专门用来控制替换元素（比如img）的内容适配方式：

优化后的通用CSS代码 #

/* 基础样式：通用适配 */
.myimage {
  width: 100%;
  height: 100vh;
  /* 保持图片比例，填充容器，自动裁剪超出部分 */
  object-fit: cover;
  /* 裁剪时默认居中，正好满足你保留中间部分的需求 */
  object-position: center center;
}

/* 桌面端可以保持原有逻辑，或者和移动端统一 */
@media only screen and (min-width: 992px) {
  .myimage {
    height: 100vh;
  }
}

精确裁剪左右各30%的特殊需求 #

如果你需要强制裁剪左右各30%（只显示中间40%的宽度），可以用以下方式实现：

.myimage {
  width: 250%; /* 容器宽度的2.5倍，这样中间40%正好填满屏幕 */
  height: 100vh;
  margin-left: -75%; /* 向左偏移75%，让中间部分居中显示 */
  object-fit: cover;
}

不过通常object-fit: cover已经足够适配各种移动端屏幕，它会自动根据容器比例调整裁剪区域，比硬编码百分比更灵活。

二、无裁剪的最优解决方案 #

如果不想裁剪图片，同时避免拉伸，我们需要让图片完整显示，同时尽可能适配屏幕。这里有两种常用思路：

1. 完整显示图片，允许留白 #

使用object-fit: contain，它会让图片保持原始比例，完整显示在容器内，不会拉伸，超出容器的部分会留白：

.myimage {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background-color: #你的背景色; /* 可以设置和图片协调的背景色，减少留白的突兀感 */
}

2. 优先保证高度占满，宽度自适应（无拉伸） #

如果希望图片高度尽可能接近100vh，同时完整显示不裁剪，可以这样设置：

.myimage {
  height: 100vh;
  width: auto;
  max-width: 100vw;
}

这种方式下，图片会按比例缩放，高度优先占满100vh，如果宽度超过屏幕，会自动缩小到屏幕宽度，同时高度也会相应降低，保证图片完整且不拉伸。

额外小技巧：解决移动端100vh兼容性问题 #

部分移动端浏览器（比如Safari）的100vh会包含顶部地址栏，导致图片实际显示超出屏幕。可以添加兼容代码：

.myimage {
  height: 100vh;
  /* 兼容Safari等浏览器的视口高度问题 */
  height: -webkit-fill-available;
  min-height: 100vh;
}

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