user1482261 user1482261 - 4 months ago 18
HTML Question

CSS resize:both aspect ratio

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

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

This example has no aspect ratio. Any suggestions?

Answer

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

markup:

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

​ js:

jQuery('#elementID').mousemove(
    function(e){
        var elem = jQuery(e.target);
        elem.height(elem.width());        
    }
)​

http://jsfiddle.net/valentinas/kFmY8/121/

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.