如何在固定尺寸容器的Iframe中缩放显示完整外部网站内容

可以通过CSS缩放实现需求，无需修改外层容器尺寸，具体实现逻辑如下：

1. 给iframe外层容器.game添加overflow: hidden，隐藏iframe缩放前溢出容器的内容
2. 取消iframe的宽高百分比设置，改为和目标展示网站一致的原始宽高
3. 给iframe添加transform: scale()属性实现缩小，同时设置transform-origin: 0 0将缩放原点对齐左上角，避免留白错位

修改后的完整CSS代码如下：

.gridgames {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 10px;
  margin: 2rem;
}

.game {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 20rem;
  margin: auto;
  background-color: green;
  transition: 150ms;
  overflow: hidden; /* 新增，隐藏iframe超出部分 */
}

.game:hover {
  transform: scale(1.1);
}

iframe {
  /* 按目标网站实际原始尺寸设置，示例为1920*1080分辨率 */
  width: 1920px;
  height: 1080px;
  border: none;
  overflow: hidden;
  transform: scale(0.18); /* 缩放比例可自行调整，数值越小缩小幅度越大 */
  transform-origin: 0 0; /* 固定缩放原点为左上角 */
}

注意事项 #

• 缩放比例需要结合目标网站原始尺寸、外层.game容器的尺寸调整，直到iframe内容可以完整展示无滚动条即可
• 如果需要适配不同设备尺寸，可通过JS动态获取外层容器和目标站点尺寸，自动计算缩放比例赋值，无需写死数值
• 若iframe无法加载目标站点内容，是因为目标站点设置了X-Frame-Options反嵌入规则，和缩放逻辑无关

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