6/14/2023 0 Comments Iframe css![]() I've tested this and it works on chrome, IE11, and firefox. As an added bonus, you don't have to set the css of the frame to hard coded values since they'll all be set dynamically, you'll just need to worry about how you want the wrap div to display. This will make the iframe and its content scale to 100% width of the wrap div (or whatever percent you want). The tricky part is that the parent element becomes the perfect height by creating a pseudo-element to push it to that height based on the aspect ratio. Var percent=_wrapWidth/this.initialWidth į='scale('+percent+')' į='top left' į='scale('+percent+')' į='top left' į='scale('+percent+')' The iframe is the child element inside it, which you apply absolute positioning to in order to fill the area. Var _frameWidth=$($('#frame').contentDocument).width() If you want the iframe and its contents to scale when the window resizes, you can set the following to the window's resize event as well as the iframes onload event. IE7 was a lost cause since -ms-zoom did not exist until IE8. Just use your favorite method for browser sniffing to conditionally include the appropriate CSS, see Is there a way to do browser specific conditional CSS inside a *.css file? for some ideas. ![]() wrapįor IE8, set the width/height to match the iframe, and add -ms-zoom to the. This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of. (Try removing the div from the sample code above and you'll see what I mean.)Īfter struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me. For some reason, in Firefox when you scale the object down by 75%, it still uses the original size of the image for layout reasons. Note: I had to use the wrap element for Firefox. It is difficult to set the size of the content in the iframe tag as same as the main content. thou the height and width are specified then also the content of the iframe tag is not displayed in the same size of the main content. This feels a bit esoteric, so if there is a better way to do it I'd welcome suggestions. Using iframe tag the content inside the tag is displayed with a default size if the height and width are not specified. Use border:none to remove the border around the iframe. Always include a title attribute (for screen readers) The height and width attributes specify the size of the iframe. The src attribute defines the URL of the page to embed. On Safari/Chrome, the iframe is resized to 75% of its original size, but the content within the iframe is not scaled at all. The HTML
0 Comments
Leave a Reply. |