I know I can make an element as high as it is wide using padding-top/bottom
#element {
width: 40%;
padding-top: 40%;
}
The reason the above works is because, when giving padding-top/bottom a percentage value, it is relative to the width of the parent, not the height.
how can i do the same thing, just making it as wide as it is high instead of the other way around?
It needs to be responsive, and the solution should work in all major browser including IE8+
You might need javascript using jquery it should be something like:
$('#element').css({
width: + $('#element').height()
})
but the above is very rough I didn't even test it
Update it works- see my fiddle: fiddle for above
or I think I might been a bit sloppy if you prefer:
var el=$('#element');
el.css({
width: + el.height()
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments