使用background-size:contain实现等比例图片遮罩时宽度异常问题

嘿，我懂你现在的困扰——用background-size: contain让图片等比例缩放后，内部的遮罩div没法精准匹配图片的实际显示范围，要么宽度超了，要么覆盖了留白区域对吧？

问题根源 #

你的.prop容器设置了width:100vw和height:100vh，但background-size: contain会让图片保持原有宽高比缩放，这就意味着图片可能在容器内留下左右或上下的空白区域。而你的.placeholder是直接占满.prop的整个宽高，所以遮罩会覆盖整个容器，而不是只覆盖图片本身。

最佳解决方案：纯CSS实现精准遮罩 #

我们可以利用宽高比容器的技巧，让容器尺寸完全匹配图片的比例，这样background-size: contain会让图片填满容器（没有留白），再用伪元素做遮罩就能完美覆盖图片。

步骤1：计算图片宽高比

你的图片是1600x1200，宽高比是4:3，对应的padding-top值为75%（计算公式：高度/宽度 * 100% → 1200/1600*100% = 75%）。

步骤2：修改CSS代码

.prop {
  width: 100%;
  max-width: 100vw; /* 限制最大宽度为视口宽度 */
  position: relative;
  padding-top: 75%; /* 用padding-top维持图片宽高比 */
  background-image: url('http://via.placeholder.com/1600x1200');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/* 用伪元素做颜色遮罩 */
.prop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  opacity: 0.5;
  pointer-events: none; /* 可选：如果不想遮罩拦截点击事件 */
}

步骤3：简化HTML

不需要内部的.placeholderdiv了，直接用伪元素实现遮罩：

<div class="prop"></div>

备选方案：用JavaScript动态匹配（适合无法提前知道图片比例的场景） #

如果你的图片是动态加载的，没法提前计算宽高比，可以用JS获取图片的实际尺寸，然后动态调整遮罩的大小和位置：

修改后的CSS

.prop { 
  background-image: url('http://via.placeholder.com/1600x1200'); 
  width:100vw; 
  background-size: contain; 
  height: 100vh; 
  background-position: center; 
  background-repeat: no-repeat; 
  border: inset 70px transparent; 
  box-sizing: border-box;
  position: relative; /* 让内部遮罩可以绝对定位 */
} 
.placeholder { 
  background:red; 
  opacity:0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
}

添加JavaScript代码

const propContainer = document.querySelector('.prop');
const placeholderMask = document.querySelector('.placeholder');

// 创建图片对象获取原始尺寸
const img = new Image();
img.src = 'http://via.placeholder.com/1600x1200';

img.onload = function() {
  const imgWidth = this.width;
  const imgHeight = this.height;
  const imgRatio = imgWidth / imgHeight;
  
  const containerWidth = propContainer.clientWidth;
  const containerHeight = propContainer.clientHeight;
  const containerRatio = containerWidth / containerHeight;
  
  let maskWidth, maskHeight;
  
  if (containerRatio > imgRatio) {
    // 容器比图片宽，图片高度占满容器，宽度按比例计算
    maskHeight = containerHeight;
    maskWidth = maskHeight * imgRatio;
  } else {
    // 容器比图片高，图片宽度占满容器，高度按比例计算
    maskWidth = containerWidth;
    maskHeight = maskWidth / imgRatio;
  }
  
  // 设置遮罩的尺寸
  placeholderMask.style.width = `${maskWidth}px`;
  placeholderMask.style.height = `${maskHeight}px`;
};

// 窗口 resize 时重新计算（可选）
window.addEventListener('resize', function() {
  // 重新执行上面的计算逻辑
  img.onload();
});

总结 #

优先推荐纯CSS方案，它不需要依赖JS，性能更好，也更简洁。只要提前知道图片的宽高比，就能轻松实现精准的颜色遮罩。如果图片是动态的，再考虑用JS方案。

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