CODEWITHSUNDEEP
htmlcssresizeaspect-ratio
user1482261
user1482261

Reputation: 191

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?

Upvotes: 2

Views: 1197

Answers (1)

valentinas
valentinas

Reputation: 4337

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.

Upvotes: 1

Related Questions