It is also important to use -ms-zoom in the CSS and not simply zoom since Chrome will go crazy and pay attention to both zoom and -webkit if you don't make the ms distinction. Step 2) Add CSS: Add a percentage value for padding-top to maintain the aspect ratio of the container DIV. This is because IE will scale the whole iframe to your set zoom size, not the content within it (which is what Chrome and Firefox do). I used the -ms-zoom on the wrapping div of themeframe not within the iframe. I gave the iframe an id so we could style it in CSS. I wrapped the iframe in a div called themeframe #Iframe zoom code#Part of this answer was used following the steps found here.įirst, arrange your HTML like this (I'm bad at arranging code on this site): I am having trouble getting this to work in IE, Chrome, Safari, and Firefox all at the same time.įound the answer, which at least worked for me. If I add zoom:0.5 to the iframe css, it fixes it in IE, but breaks it in chrome. As shown above, I have issues in IE, where the div/iframe is the correct size, but the webpage inside is 100%, NOT 50%. I have a 520 x 400 div that I want filled with a 50% scaled version of a webpage. We can use this same technique to make other types of embedded content responsive like Google Maps, calendars, Vimeo, and YouTube videos.I am attempting to get a cross-browser css zoom to work, but everything I have found here isn't working for me. Using aspect ratio boxes is great for all kinds of content, not just iframes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |