如何響應地在圖像上層疊和嵌入外部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