Question

var j = jQuery.noConflict();
j.fn.portionHeight = function(ratio){
    var width = j(this).width();
    var height = Math.floor(width*ratio);
    j(this).height(height);
}

function initAndResize(){
    j('.square').portionHeight(1);
}

j(document).ready(function(){
    initAndResize();
    j('.square').resize(function(){
        initAndResize();
        console.log('changed');
    })
});

我正在使用javascript来保持DIV方块。我正在调整方块的大小，在开发工具中更改其宽度（以百分比表示）以查看最佳尺寸。我希望高度会相应改变，但事实并非如此。我认为这是因为在开发工具中通过CSS更改宽度时不会触发“调整大小”事件，有没有办法克服这个问题？

小提琴：http://jsfiddle.net/4og9d7m7/

Answer 1

这可能不是您正在寻找的答案，但我认为分享我最喜欢的CSS解决方案可能会有所帮助。

https://jsfiddle.net/sLsxcu9v/1/

将padding-bottom设置为与div宽度相同的百分比，并将div内部绝对定位到容器的整个范围内对我来说是一个很好的修复，可能适合您的情况，也可能不适合您。

<div class="container">
    <div class="square">
        <div class="absolute">
            <h2>I'm still a square</h2>
        </div>
    </div>
</div>

div.container{

    width:50%;    

}


div.square {

    position:relative;
    padding-bottom:100%;
    background-color:red;

}

div.absolute {

    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;

}

h2{ 

    color:white;
    text-align:center;
    width:100%;

}

Answer 2

问题在于DOM元素没有resize事件。只有window对象拥有它。但是，这有望改变。有一项新规范承诺使用ResizeObserver。有关here的更多信息。不过，截至2018年中，only Chrome supports it。

在开发工具中修改宽度不会触发调整大小事件

2 个答案: