html - CSS 调整大小：两种纵横比

Question

我正在尝试div使用 CSSresize属性在标签上保持 1:1 的纵横比。有可能这样做吗？

这个例子没有纵横比。有什么建议么？

score 1 · Accepted Answer

您可以将其设为“resize:horizontal”，然后使用 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());        
    }
)

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

1 回答 1