user1482261 user1482261 - 1 year ago 136
HTML Question

CSS resize:both aspect ratio

I'm trying to maintain aspect ratio 1:1 on

tag with CSS
property. Is it possible to do so?

This example has no aspect ratio. Any suggestions?

Answer Source

You could make it "resize:horizontal" and then resize the other way with javascript:


<div id="elementID" style="width:200px;height:200px;background:#000;resize:horizontal;overflow:hidden;"></div>

​ js:

        var elem = jQuery(;

The problem is that you need to check somehow when the element changes. AFAIK there is no event fired when the element is resized, so you would have to check in intervals to get reliable results. My example observes mousemove, but that is not reliable because you can actually move the mouse out of the element while resizing.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download