有没有办法从所有 4 个方向裁剪 iframe？ [复制]答案

【问题标题】：is there a way to crop iframe from all 4 direction? [duplicate]有没有办法从所有 4 个方向裁剪 iframe？ [复制]
【发布时间】：2021-08-21 21:31:21
【问题描述】：

我正在尝试在 iframe 中加载页面但我只想将页面的特定部分显示到 iframe 中。我找到了这个解决方案：

<iframe src="https://example.com" height="500" width="900" style="position: relative; left: -10%; top: -15%"></iframe>

它从左侧和顶部裁剪页面不需要的部分，但我如何才能裁剪页面的底部和右侧部分？这样我就可以得到所有 4 个边都被裁剪的页面？

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用容器、flexbox 和绝对定位来实现跨浏览器兼容的解决方案，例如：

HTML：

<div id="iframe-container">
 <iframe></iframe><!-- Paste your iframe here -->
</div>

CSS：

#iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#iframe-container iframe {
  position: absolute;
  width: 120%;
  height: auto;
}

您可以使用 CSS 中的 width 和 height 值来根据需要更改为裁剪。一个应该是 % - 值，另一个应该是 auto，以保持纵横比。

此外，您可以使用#iframe-container iframe 元素上的top、left、bottom 和right 属性更具体地移动 iframe；分别表示 iframe 与容器的顶部、左侧、底部和右侧边框的距离。使用负值将 iframe 移出边界，使用正值将它们从边界向内移动，在相应的方向上。

有了这个，你几乎可以将你的 iframe 放置在任何你想要的地方 + 任何裁剪。

【讨论】：

【解决方案2】：

您无法阻止所有 iframe 内容的呈现（即它不是“正确”裁剪），但您可以通过使用 iframe 上的剪辑路径阻止用户看到所有内容（除非他们使用开发工具进行挖掘） .

例如：

iframe {
  clip-path: polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%);
}

将仅显示 iframe 的中心 40% x 40% 部分。

【讨论】：

IE 支持这个吗？