如何在CSS中实现图片与纯色拆分背景？解决移动端拉伸问题

你的问题根源在于background-size: 65vw 100vh的设置——这个写法强制图片宽度为视窗宽度的65%、高度为100%视窗高度，当屏幕宽高比变化时，图片会被强行拉伸以匹配固定尺寸，最终导致变形。

修改方案 #

替换body的背景相关样式，改用比例友好的属性组合，同时优化定位逻辑：

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background-image: url(https://picsum.photos/2000);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right center; /* 右侧对齐+垂直居中 */
  background-size: cover; /* 按比例缩放，覆盖目标区域 */
  background-color: teal;
  flex-direction: column;
}

移动端进阶适配（可选） #

如果希望小屏设备上调整图片显示逻辑，比如全屏展示，补充媒体查询：

@media all and (max-width: 600px) {
  body {
    background-position: center center; /* 居中显示 */
    background-size: cover; /* 全屏覆盖 */
  }
  button {
    margin-top: 10px;
  }
}

原理说明 #

• background-size: cover：让图片按原始比例缩放，确保完全覆盖背景区域，超出部分自动裁剪，彻底避免拉伸变形
• background-position: right center：维持原设计的右侧拆分布局，同时保证图片垂直方向居中，视觉更协调
• 移动端调整为全屏居中，适配小屏设备的显示需求

内容的提问来源于stack exchange，提问作者Sean-Codes