如何在 720 像素寬度的容器“Div”中顯示帶有 iframe 標記的 1920 像素寬度版本的網站

Question

我有一個網站的 iframe 標簽，寬度為 1920px（桌面版），我想縮放它以適應 720px div 容器，而不更改 iframe 寬度，因為它會給我平板電腦版本，這可能嗎？ 謝謝您的幫助！！

Answer 1

您可以使用transform: scale(); . 您想按 720 / 1920 = 0.375 = 37.5% 進行縮放。

 .wrapper{ width: 720px; /* just a random height to make the resulting code snippet window not too big */ max-height: 450; overflow: hidden; border: 2px dashed lightgreen; } iframe{ transform-origin: 0 0; transform: scale(37.5%); }

 <div class="wrapper"> <iframe src="http://example.com/" width="1920" height="1080"> </iframe> </div>