Question

我有一个带有YB_full_content_img_header类的div。我想根据客户屏幕宽度将高度div从当前高度改为60％。

var screen = jQuery(window).width();
    var div= jQuery(".YB_full_content_img_header");
    div.css('height',60%???);

我的代码没有用。感谢。

Answer 1

将值作为字符串传递给.css方法

div.css('height','60%');

如果它取决于窗口宽度，则必须进行测试

if (screen < 500){ /*500 is an example here*/
    div.css('height','60%');
}

由于评论

，

更新的答案

OP希望在某个元素上保持固定的宽度/高度比例。

解决方案是在浏览器宽度改变时调整div的大小

就OP的代码而言，更新是

$(function() {
    var div = $('.YB_full_content_img_header');

    $(window).resize(function(){
        var width = div.width();
        div.css('height', width * 60/100);
    }).trigger('resize');
});

但另一种选择是使用CSS填充技巧（Maintain the aspect ratio of a div with CSS）

Answer 2

我认为，您打算根据浏览器的高度来确定图像的高度和宽度。如果这是正确的，那么你可以这样做，例如如下：

$('#Your_Div').css({'width':(parseInt((60*screen.availWidth)/100)+'px'),'height':(parseInt((60*screen.availHeight)/100)+'px') });

你可以获得你的div高度的60％，如下所示：parseInt((60*$('#Your_Div_Id').height())/100)

Answer 3

试试这段代码：

    <script>
            $(document).ready(function(){               
                windowHeight=$(window).height();
                newHeight=Math.round((60/100)*windowHeight);    //60 % OF CURRENT WINDOW HEIGHT                         
                $('.YB_full_content_img_header').css('height',newHeight);               
            });
    </script>

这可能会有所帮助。

Div高度取决于客户端屏幕

3 个答案: