如何实现尺寸一致的矩形？适配不同图片的CSS/HTML方案

嘿，我来帮你搞定这个问题！要让两个矩形不受图片尺寸影响，始终和'Máscara'保持相同的尺寸，这里有几个实用的方案，你可以根据自己的代码结构来选择：

方案1：用容器统一尺寸（最推荐） #

把'Máscara'和两个矩形放在同一个容器里，让容器自动适配图片的尺寸，然后让矩形占满容器空间。这样不管图片怎么变，矩形都会自动匹配它的大小。

HTML 示例代码 #

<div class="mascara-container">
  <img src="你的Máscara图片地址" alt="Máscara" class="mascara-img">
  <!-- 两个需要匹配尺寸的矩形 -->
  <div class="match-rect rect-one"></div>
  <div class="match-rect rect-two"></div>
</div>

CSS 代码 #

.mascara-container {
  /* 让容器跟着图片自动调整大小 */
  display: inline-block;
  position: relative;
}

.mascara-img {
  /* 确保图片正常显示，不被拉伸变形 */
  display: block;
  width: 100%;
  height: auto;
}

.match-rect {
  /* 绝对定位让矩形和图片完全重叠（也可以根据需求调整位置） */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里可以自定义矩形的样式，比如边框、背景色 */
  border: 2px solid #ff4444;
  background-color: rgba(255, 68, 68, 0.2);
}

/* 如果两个矩形需要不同样式，单独设置即可 */
.rect-one {
  border-color: #0099cc;
}
.rect-two {
  border-color: #669900;
}

方案2：用CSS变量同步尺寸 #

如果没法把元素放在同一个容器里，可以用CSS变量存储'Máscara'的尺寸，再让矩形引用这些变量。不过这个方法需要一点JavaScript来获取图片的实际尺寸：

HTML 示例代码 #

<img src="你的Máscara图片地址" alt="Máscara" id="mascara">
<div class="match-rect"></div>
<div class="match-rect"></div>

JavaScript 代码（放在HTML末尾） #

const mascaraImg = document.getElementById('mascara');
// 确保图片加载完成后再获取尺寸
mascaraImg.onload = function() {
  const imgWidth = this.offsetWidth;
  const imgHeight = this.offsetHeight;
  // 设置全局CSS变量
  document.documentElement.style.setProperty('--mascara-width', `${imgWidth}px`);
  document.documentElement.style.setProperty('--mascara-height', `${imgHeight}px`);
}

CSS 代码 #

.match-rect {
  width: var(--mascara-width);
  height: var(--mascara-height);
  border: 2px solid #ff4444;
  margin: 10px 0;
}

方案3：用aspect-ratio匹配宽高比 #

如果只需要匹配'Máscara'的宽高比例，而不是绝对尺寸，可以用CSS的aspect-ratio属性：

CSS 代码 #

/* 先确定Máscara的宽高比，比如图片是800x600，比例就是4/3 */
.match-rect {
  /* 可以设置固定宽度，高度自动按比例计算 */
  width: 300px;
  aspect-ratio: 4/3;
  border: 2px solid #ff4444;
}

/* 或者让宽度自适应父容器，高度按比例调整 */
.match-rect {
  width: 100%;
  aspect-ratio: 4/3;
}

这样不管图片尺寸怎么变化，只要你设置的比例和'Máscara'一致，矩形的比例就会始终匹配。

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