Search code examples
htmlcssresizeaspect-ratio

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?

Solution

  • 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.