如何在图像顶部响应式分层和嵌入外部 html 内容（iframe）？答案

【问题标题】：How to responsively layer and embed external html content (iframe) on top of an image?如何在图像顶部响应式分层和嵌入外部 html 内容（iframe）？
【发布时间】：2017-02-03 09:07:45
【问题描述】：

我想向桌面用户展示手机图像并覆盖 iframe，以显示外部网站以适应手机屏幕。两者都应该响应。

如果可能，当访问者已经在手机上时，他们应该看到与桌面上相同的东西，但没有手机作为框架。

有谁知道如何做到这一点？

【问题讨论】：

标签： mobile iframe embed

【解决方案1】：

这是我用于响应式堆叠 div 的方法。

这适用于您要求的两种方法，但我建议不要将桌面版本加载给移动用户，因为他们无法选择阻止内容加载的带宽。

它基于百分比，根据我的经验，它具有最好的响应结果，并且编码最少。替换照片后，您需要调整 CSS 中的宽度和高度百分比值以根据需要进行缩放。

标记

<div id="container">
      <div id="photo">
        <img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
          <div id="site">
            <iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
          </div>
      </div>
    </div>

CSS

#container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
}

#photo {
  position: absolute;
  width: 100%;
}

#site {
  position: absolute;
  width: 100%;
  max-width: 43%;
  height: 76%;
  top: 11.75%;
  left: 28.25%;
  border: none;
}

JsFiddle Demo Link

【讨论】：