首頁 > web前端 > css教學 > 如何使用 CSS 將 Iframe 內容縮放至原始大小的 80%?

如何使用 CSS 將 Iframe 內容縮放至原始大小的 80%?

Patricia Arquette
發布: 2025-01-03 18:34:40
原創
444 人瀏覽過

How Can I Scale Iframe Content to 80% of Its Original Size Using CSS?

縮放 iframe 中的內容

要將 iframe 的內容縮放到所需的大小,您可以利用 CSS 轉換。在本例中,目標是顯示 iframe 的原始大小的 80%。

Kip 的解決方案,稍加修改,就可以在 Opera 和 Safari 等瀏覽器中實現這一目標。 CSS 應如下調整:

#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    -ms-zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}
登入後複製

在此程式碼中,「-ms-zoom」屬性特定於 Internet Explorer,而其他轉換屬性適用於其他瀏覽器。將「scale」值設為 0.75 可以有效地將 iframe 內容縮小到原始大小的 75%。

此外,您可能需要在「frame」元素上設定「overflow: hide」以抑制外觀捲軸。這將確保縮放後的內容保持在指定的尺寸內。

以上是如何使用 CSS 將 Iframe 內容縮放至原始大小的 80%?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板