CSS调整大小：两者的纵横比

Question

我正在尝试使用 CSS resize 属性在 div 标记上保持 1:1 的纵横比。有可能吗？

This example 没有纵横比。有什么建议吗？

Answer 1

您可以将其设为“resize:horizo​​ntal”，然后使用 javascript 以另一种方式调整大小：

标记：

<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/

问题是您需要在元素更改时以某种方式进行检查。 AFAIK 调整元素大小时不会触发任何事件，因此您必须检查间隔以获得可靠的结果。我的示例观察到 mousemove，但这并不可靠，因为您实际上可以在调整大小时将鼠标移出元素。