How To Scale The Content Of Element - W3docs</a></h1> <div class="breadcrumb breadcrumbs"> <div class="rdfa-breadcrumb"> <div xmlns:v="http://rdf.data-vocabulary.org/#"> <p><span class="breadcrumbs-title"> </span><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://truyenhinhcapsongthu.net/" class="home">Trang chủ</a></span> <span class="separator">»</span> <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://truyenhinhcapsongthu.net/top/html-iframe-size-to-fit-content/xl4oIgIN" title="Html Iframe Size To Fit Content ">Html Iframe Size To Fit Content </a></span> <span class="separator">»</span> How To Scale The Content Of <iframe> Element - W3docs</p> </div> </div> </div> <div class="bvlienquan" style="padding: 15px; background: #e9ebec;margin-bottom: 20px"> <p><strong>Có thể bạn quan tâm</strong><p> <ul> <li><a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-iframe-stretch-to-content/3mZGUYIb" rel="bookmark" title="Html Iframe Stretch To Content ">Html Iframe Stretch To Content </a><li><a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-ile-ilgili-bilgiler/P0NoUxI8" rel="bookmark" title="Html Ile Ilgili Bilgiler ">Html Ile Ilgili Bilgiler </a><li><a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-ile-ilgili-temel-bilgiler/0q9BUPI9" rel="bookmark" title="Html Ile Ilgili Temel Bilgiler ">Html Ile Ilgili Temel Bilgiler </a><li><a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-ile-mail-gonderme-kodu/1Bz9IvIP" rel="bookmark" title="Html Ile Mail Gönderme Kodu ">Html Ile Mail Gönderme Kodu </a><li><a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-ile-xml-den-veri-cekme/4N5vSgIM" rel="bookmark" title="Html Ile Xml Den Veri çekme ">Html Ile Xml Den Veri çekme </a> </ul> </div> <div class="blog-single-post"> <p>The HTML <iframe> element creates an inline frame for embedding a third-party content. Scaling the content of an <iframe> element may be needed if you want to display an object in the area not matching its original size.</p> <p>Below, we are going to show how to scale the content of an <iframe> step by step.</p> <p>Let’s start with HTML.</p> <h2 id="create-html-1">Create HTML</h2> <ul> <li>Create a <div> element with an <span>id</span> "wrap".</li> <li>Place an <iframe> element with an id "scaled-frame" inside the <div>.</li> <li>Add the <span>src</span> attribute with the content you want to display.</li> </ul> <span><<span>div</span> <span>id</span>=<span>"wrap"</span>></span> <span><<span>iframe</span> <span>id</span>=<span>"scaled-frame"</span> <span>src</span>=<span>"/tool/"</span>></span><span></<span>iframe</span>></span> <span></<span>div</span>></span> <h2 id="add-css-3">Add CSS</h2> <ul> <li>Use the width, height, padding, and overflow properties to set the dimensions for the "wrap".</li> <li>Use the width, height, and border properties to set the dimensions for the “scaled-frame”.</li> <li>Add the zoom property to scale the content to 75%.</li> <li>Use the transform and transform-origin properties.</li> </ul> <span>#wrap</span> { <span>width</span>: <span>750px</span>; <span>height</span>: <span>1500px</span>; <span>padding</span>: <span>0</span>; <span>overflow</span>: hidden; } <span>#scaled-frame</span> { <span>width</span>: <span>1000px</span>; <span>height</span>: <span>2000px</span>; <span>border</span>: <span>0px</span>; } <span>#scaled-frame</span> { zoom: <span>0.75</span>; -moz-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -moz-<span>transform-origin</span>: <span>0</span> <span>0</span>; -o-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -o-<span>transform-origin</span>: <span>0</span> <span>0</span>; -webkit-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -webkit-<span>transform-origin</span>: <span>0</span> <span>0</span>; } <span>@media</span> screen <span>and</span> (<span>-webkit-min-device-pixel-ratio</span>:<span>0</span>) { <span>#scaled-frame</span> { zoom: <span>1</span>; } } <p>Here is the result of our code.</p> <h3 id="example-of-scaling-the-content-of-the-and-lt-iframe-and-gt-element-5">Example of scaling the content of the <iframe> element:</h3> <span><!DOCTYPE <span>html</span>></span> <span><<span>html</span>></span> <span><<span>head</span>></span> <span><<span>title</span>></span>Title of the document<span></<span>title</span>></span> <span><<span>style</span>></span><span> <span>#wrap</span> { <span>width</span>: <span>750px</span>; <span>height</span>: <span>1500px</span>; <span>padding</span>: <span>0</span>; <span>overflow</span>: hidden; } <span>#scaled-frame</span> { <span>width</span>: <span>1000px</span>; <span>height</span>: <span>2000px</span>; <span>border</span>: <span>0px</span>; } <span>#scaled-frame</span> { zoom: <span>0.75</span>; -moz-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -moz-<span>transform-origin</span>: <span>0</span> <span>0</span>; -o-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -o-<span>transform-origin</span>: <span>0</span> <span>0</span>; -webkit-<span>transform</span>: <span>scale</span>(<span>0.75</span>); -webkit-<span>transform-origin</span>: <span>0</span> <span>0</span>; } <span>@media</span> screen <span>and</span> (<span>-webkit-min-device-pixel-ratio</span>:<span>0</span>) { <span>#scaled-frame</span> { zoom: <span>1</span>; } } </span><span></<span>style</span>></span> <span></<span>head</span>></span> <span><<span>body</span>></span> <span><<span>div</span> <span>id</span>=<span>"wrap"</span>></span> <span><<span>iframe</span> <span>id</span>=<span>"scaled-frame"</span> <span>src</span>=<span>"/tool/"</span>></span><span></<span>iframe</span>></span> <span></<span>div</span>></span> <span></<span>body</span>></span> <span></<span>html</span>></span> Try it Yourself » <p>In the example mentioned above, we scaled the <iframe> that is 1000px wide down to 750px. If you want to scale the content to 75%, 1000px x 2000px will become 750px x 1500px. We also used prefixes with the transform and transform-origin properties for maximum browser compatibility.</p> <p>Also note that if the @media screen and (-webkit-min-device-pixel-ratio:0) is not defined, the <iframe> will be scaled twice in Chrome. </p> <p>Let’s see another example.</p> <h3>Example of scaling the content of the <iframe> element using internal CSS: <span><!DOCTYPE <span>html</span>></span> <span><<span>html</span>></span> <span><<span>head</span>></span> <span><<span>title</span>></span>Title of the document<span></<span>title</span>></span> <span><<span>style</span>></span><span> <span>#target</span> { <span>width</span>: <span>400px</span>; <span>height</span>: <span>300px</span>; <span>overflow-y</span>: auto; <span>overflow-x</span>: auto; <span>resize</span>: both; <span>position</span>: relative; <span>z-index</span>: <span>2</span>; } <span>iframe</span> { <span>width</span>: <span>100%</span>; <span>height</span>: <span>100%</span>; <span>border</span>: none; } </span><span></<span>style</span>></span> <span></<span>head</span>></span> <span><<span>body</span>></span> <span><<span>div</span> <span>id</span>=<span>"target"</span>></span> <span><<span>iframe</span> <span>src</span>=<span>"/quiz/"</span>></span><span></<span>iframe</span>></span> <span></<span>div</span>></span> <span></<span>body</span>></span> <span></<span>html</span>></span> Try it Yourself » <p>Here, we used an internal style sheet where the overflow property controls the content that doesn’t fit into an area.</p> <p>In our last example, JavaScript is used. We use the contentWindow property to adjust the height of the <iframe> according to the contents. Note that scrollbars do not appear.</p> <h3 id="example-of-scaling-the-content-of-the-and-lt-iframe-and-gt-element-using-javascript-9">Example of scaling the content of the <iframe> element using JavaScript:</h3> <span><!DOCTYPE <span>html</span>></span> <span><<span>html</span>></span> <span><<span>head</span>></span> <span><<span>title</span>></span>Title of the document<span></<span>title</span>></span> <span><<span>style</span>></span><span> <span>body</span> { <span>background-color</span>: <span>#ffffff</span>; } <span>div</span> { <span>width</span>: <span>50%</span>; } </span><span></<span>style</span>></span> <span></<span>head</span>></span> <span><<span>body</span>></span> <span><<span>iframe</span> <span>src</span>=<span>"/snippets/css.html"</span> <span>id</span>=<span>"target"</span>></span><span></<span>iframe</span>></span> <span><<span>script</span>></span><span> <span>var</span> div = <span>document</span>.<span>getElementById</span>(<span>"target"</span>); div.<span>onload</span> = <span>function</span>() { div.<span>style</span>.<span>height</span> = div.<span>contentWindow</span>.<span>document</span>.<span>body</span>.<span>scrollHeight</span> + <span>'px'</span>; } </span><span></<span>script</span>></span> <span></<span>body</span>></span> <span></<span>html</span>></span> Try it Yourself » </div> <div style="padding: 20px; background: #eaf0ff;"> <p>Từ khóa » <a target="_blank" href="https://truyenhinhcapsongthu.net/top/html-iframe-size-to-fit-content/xl4oIgIN">Html Iframe Size To Fit Content </a></p> <ul style="padding-left: 0"> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/adjust-width-and-height-of-iframe-to-fit-with-content-in-it/7blmH2IeIYBo8aw" class="relatedtit" rel="bookmark" title="Adjust Width And Height Of Iframe To Fit With Content In It - Stack Overflow">Adjust Width And Height Of Iframe To Fit With Content In It - Stack Overflow</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-con/GnvMCzI1IYB1dZ6" class="relatedtit" rel="bookmark" title="How To Adjust The Width And Height Of Iframe To Fit With Content In It">How To Adjust The Width And Height Of Iframe To Fit With Content In It</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/change-iframe-size-automatically-to-fit-content-prevent-sc/NJK9CVI4Iv7534a" class="relatedtit" rel="bookmark" title="Change Iframe Size Automatically To Fit Content & Prevent Scrollbars">Change Iframe Size Automatically To Fit Content & Prevent Scrollbars</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/resize-iframe-to-fit-content-same-domain-only-css-tricks/wo1gfwI7I1w0zK" class="relatedtit" rel="bookmark" title="Resize Iframe To Fit Content (Same Domain Only) - CSS-Tricks">Resize Iframe To Fit Content (Same Domain Only) - CSS-Tricks</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/automatically-adjust-iframe-height-according-to-its-contents/M4KgsMI0IgGLAV2" class="relatedtit" rel="bookmark" title="Automatically Adjust IFrame Height According To Its Contents Using ...">Automatically Adjust IFrame Height According To Its Contents Using ...</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/how-to-adjust-width-and-height-of-iframe-to-fit-with-content/kPlqI1IXI045eVG" class="relatedtit" rel="bookmark" title="How To Adjust Width And Height Of Iframe To Fit With Content In It">How To Adjust Width And Height Of Iframe To Fit With Content In It</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/how-do-i-fit-an-iframe-to-its-size-brain-writings/wo1gfwI7I6YN0xE" class="relatedtit" rel="bookmark" title="How Do I Fit An Iframe To Its Size? - Brain Writings">How Do I Fit An Iframe To Its Size? - Brain Writings</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/iframe-height-100-code-example/3mZvtYIoIronJ5r" class="relatedtit" rel="bookmark" title="Iframe Height 100 Code Example">Iframe Height 100 Code Example</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/resize-external-website-content-to-fit-iframe-width/D8KJH7I5IxR1Vvr" class="relatedtit" rel="bookmark" title="Resize External Website Content To Fit Iframe Width">Resize External Website Content To Fit Iframe Width</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/iframe-width-of-parent-code-example-code-grepper/EmKGtLI3IPqk4aK" class="relatedtit" rel="bookmark" title="Iframe Width Of Parent Code Example - Code Grepper">Iframe Width Of Parent Code Example - Code Grepper</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/adjust-the-iframe-height-to-fit-with-content-in-javascript/RqXwF9IrI64J5x7" class="relatedtit" rel="bookmark" title="Adjust The IFrame Height To Fit With Content In JavaScript - StackHowTo">Adjust The IFrame Height To Fit With Content In JavaScript - StackHowTo</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/iframe-auto-adjust-height-as-content-changes-faqcode4u-com/mq96FJIBIdd4xlv" class="relatedtit" rel="bookmark" title="Iframe Auto Adjust Height As Content Changes">Iframe Auto Adjust Height As Content Changes</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/3-ways-to-resize-iframes-in-html-wikihow/l9gLHMIyIZgknB4" class="relatedtit" rel="bookmark" title="3 Ways To Resize IFrames In HTML - WikiHow">3 Ways To Resize IFrames In HTML - WikiHow</a></h3> </li> <li> <h3><a href="https://truyenhinhcapsongthu.net/top/how-to-create-responsive-iframes-w3schools/GnvMCzI1IDNEZ7Y" class="relatedtit" rel="bookmark" title="How To Create Responsive Iframes - W3Schools">How To Create Responsive Iframes - W3Schools</a></h3> </li> </ul> </div> </article> </div> <div id="text-26" class="mh-footer-widget widget_text"> <h6 class="mh-widget-title mh-footer-widget-title" style="text-align: center;"><span class="mh-widget-title-inner mh-footer-widget-title-inner">Liên Hệ</span></h6> <div class="textwidget"> <p style="text-align: center;"><a href="https://truyenhinhcapsongthu.net/" target="_blank"><span style="color: #ff0000;"><strong>TRUYỀN HÌNH CÁP SÔNG THU ĐÀ NẴNG</strong></span></a></p> <p style="text-align: center;">Địa Chỉ: <span style="color: #008000;">58 Hàm Nghi - Đà Nẵng</span></p> <p style="text-align: center;">Phone: <span style="color: #008000;">0904961917</span></p> <p style="text-align: center;">Web: <a href="https://truyenhinhcapsongthu.net/" target="_blank">truyenhinhcapsongthu.net</a></p> <p style="text-align: center;">Facebook: <a href="https://www.facebook.com/truyenhinhcapsongthu/" target="_blank">https://fb.com/truyenhinhcapsongthu/</a></p> <p style="text-align: center;">Twitter: <a href="https://twitter.com/Capsongthu" target="_blank">@ Capsongthu</a></p> </div> </div> <p class="copyright" style="text-align: center;">Copyright © 2022 | Thiết Kế <a href="https://truyenhinhcapsongthu.net/" rel="nofollow">Truyền Hình Cáp Sông Thu</a></p> <script type='text/javascript' src='https://truyenhinhcapsongthu.net/wp-content/themes/songthu/assets/js/lazyload.min.js' id='lazyload-core-js'></script> <script type="text/javascript"> (function ($) { var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy,.loading,[loading='lazy'],[data-lazyloaded='1'],.blog-single-post img", thresholds: "500px 0px", }); // buildTocContent(); })(jQuery); </script> </body> </html>