html - Keep 'transform-scale' aspect ratio for iframe -
i'm having trouble keeping 'transform-scale' attribute on aspect ratio when browser window being resized. instance, if window resized, iframe transform-scale attribute scale contents inside fit iframe width , height without resizing of sites contents. can't seem understand how achieve without using javascript or other libraries. came below:
html:
<div> <iframe id="resize" src="http://www.w3schools.com/" width="100%" height="100%"></iframe> </div>
css:
* { margin:0; padding:0; } div { height: 100vw; width: 56.25vw; /* 100/56.25 = 1.778 */ background: skyblue; max-height: 100vh; max-width: 177.78vh; /* 16/9 = 1.778 */ margin: auto; position: absolute; top:0; bottom:0; /* vertical center */ left:0; right:0; /* horizontal center */ } iframe { -webkit-transform:scale(0.8); -moz-transform-scale(0.8); -o-transform: scale(0.8); -ms-zoom: 0.8; }
http://jsfiddle.net/rkmyc95e/1/
all i'm trying maintain 'transform-scale' aspect ratio when window scaled.
note: can see, i'm having issues maintaining aspect ratio of iframe, can't maintain top , bottom stay in place.
the transform scale using going set width of iframe 80% of width, , height of iframe 80% of height. , won't maintaining aspect ratio.
you have iframe set 100% of parent width , height on iframe element in html. if remove 2 attributes, you'll see interesting, starting point fixed aspect ratio can start working with.
to maintain aspect ratio of either div or iframe, check out common question on se like: https://stackoverflow.com/a/10441480/3708223
Comments
Post a Comment