如何响应地在图像上层叠和嵌入外部html内容（iframe）？

Question

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

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

有谁知道这可以做到吗？

Answer 1

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

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

它基于百分比和我的经验，它具有最佳的响应结果，最少的编码。一旦您替换照片，您需要调整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