求助：同尺寸图片无法覆盖div及图片布局错位问题

一、让图片完全覆盖#frame容器 #

你当前用background-size: contain会保持图片原始比例，导致无法填满容器；加上transform: scaleY(1.7)拉伸容器后，背景图的尺寸匹配逻辑更混乱，且#frame img规则完全无效（因为容器内没有<img>标签）。

修复方案二选一： #

方案1：直接设置容器拉伸后的高度（更直观）

替换transform: scaleY(1.7)，直接定义拉伸后的容器高度，用background-size: cover让图片按比例填满容器：

#frame {
  height: 340px; /* 200px × 1.7，代替scaleY拉伸 */
  width: 500px;
  background-color: brown;
  left: 20px;
  position: relative;
  align-self: center;
  background-image: url(king2.png);
  background-size: cover; /* 按比例覆盖容器，超出部分裁剪 */
  background-repeat: no-repeat;
  background-position: center; /* 图片居中显示 */
}

方案2：保留scaleY拉伸，匹配背景图尺寸

如果必须用transform: scaleY(1.7)，调整背景图尺寸来匹配拉伸比例：

#frame {
  height: 200px;
  width: 500px;
  background-color: brown;
  left: 20px;
  position: relative;
  align-self: center;
  transform-origin: bottom;
  transform: scaleY(1.7);
  background-image: url(king2.png);
  background-size: 100% calc(100% * 1.7); /* 匹配Y轴拉伸比例 */
  background-repeat: no-repeat;
  background-position: bottom; /* 和transform原点对齐 */
}

二、修复地图图片的定位与布局混乱 #

你当前没有给#map设置position，导致top/left属性完全无效；transform: scale(0.1)会让元素的占位还是原始大小，加上#learn用相对定位保留原位置，直接打乱了flex容器的布局。

修复步骤： #

1. 给父容器#grey加position: relative，让内部绝对定位元素以此为参照
2. 给#learn和#map设置position: absolute，脱离文档流避免占位混乱
3. 用width/height直接控制地图尺寸，代替不稳定的transform: scale
4. 清理HTML里的冗余标签（多余的</div>和重复的</body></html>）

修改后的完整代码：

HTML：

<!DOCTYPE html>
<html>
<head>
  <!-- 这里添加你的meta、标题、CSS引入等内容 -->
</head>
<body>
  <div id="whitegap"></div>
  <div id="grey">
    <div id="frame"></div>
    <div id="learn"><h1>Learn more about the States</h1></div>
    <a href="wasu.html" id="mapper"><img src="map.png" id="map"></a>
  </div>
</body>
</html>

CSS：

#whitegap {
  height: 80px;
}

#grey {
  background-color: grey;
  height: 600px;
  width: auto;
  margin-left: 12px;
  margin-right: 30px;
  display: flex;
  justify-items: center;
  position: relative; /* 作为绝对定位的父容器 */
}

/* 这里用上面任意一种#frame的修复方案 */
#frame {
  height: 340px;
  width: 500px;
  background-color: brown;
  left: 20px;
  position: relative;
  align-self: center;
  background-image: url(king2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#learn {
  height: 50px;
  background-color: black;
  font-family: Verdana, sans-serif;
  color: white;
  font-size: large;
  position: absolute; /* 脱离文档流 */
  top: 60px;
  left: 250px;
}

h1 {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute; /* 脱离文档流，避免打乱布局 */
  top: 130px;
  left: 250px;
  width: 80px; /* 直接设置合适尺寸，高度自动按比例适配 */
}

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