jquery - CSS 仅在达到 max-height 时才增加宽度

Question

我想制作一个具有最大高度和初始宽度的div，并且只有当内容达到最大高度值时才增加宽度？没有 JavaScript 可以做到这一点吗？

https://fiddle.jshell.net/zn77t0r1/

更新:

如果没有，如何使用 JS 或 jQuery 轻松实现？

Answer 1

所以你必须知道你的div的高度是多少才能增加它的宽度。

类似于

If (height >= max-height)  //change width

仅使用 css 或 html 是不可能实现这一点的。 但如果您不介意使用 jQuery，那么使用 jQuery 就很容易做到。

这应该可以做到:

//call function when page is loaded
$(document).ready(function(){
    resizeWidth();
}); 

//call function when page is resized
$(window).resize(function(){
    resizeWidth();
}); 

function resizeWidth(){

    var maxHeight = 250; // your max-height in px
    if ($('.container').height() >= maxHeight) {
        $('.container').css('max-width', '400px');
    }else {
        $('.container').css('max-width', '200px');
    }
}