根据宽度计算横幅的高度 - Calculate height of banner based on width

Calculate height of banner based on width

本文关键字：高度计算 | 更新日期: 2023-09-27

我有一个横幅滑动条，我强制100%的宽度。问题是，当它加载时，第一张幻灯片不显示(至少在chrome上)，我必须等待第二张幻灯片"滑"进去……然后一切都向下推，看起来应该。如果我设置一个固定的高度，它工作得很好，但我的分辨率是1900，不同分辨率的屏幕看起来会很糟糕，一个锁定高度。

我想知道是否有一种方法可以计算访问者分辨率和横幅尺寸，以根据负载上的100%宽度计算出适当的高度。

测试url为http://www.can-do.org/beta/(再次，我认为它的工作与IE，我只看到它在Chrome/firefox)

使用CSS代码更改横幅大小:

@media only screen and (max-width: 480px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_baner_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_baner_image_id {width:000px;height:000px;}
}

单独使用CSS也可以做到这一点。@media规则的问题在于，每个像素宽度需要一个规则，这是不可行的。所以你可以试试这个:

首先，在这里更改包装器div:

<div align="center">

<div class="pluswrap">

然后，将这些样式添加到你的CSS文件中:

.pluswrap {
text-align: center;
padding-bottom: 30%;
height: 0;
position: relative;
}

幻灯片的高度始终是宽度的30%，因此设置30%的底部填充可以使容器div在任何屏幕尺寸下保持该尺寸。

(我真的不能远程正确地发送这个，但值得一试。它似乎确实工作，但我不能刷新页面，看看页面加载时发生了什么，因为临时样式被擦除。我很想知道它是否有效。)

由于您正在使用Jquery，您可以通过以下方式获得用户分辨率:

$(window).width();
$(window).height();

的例子:

$(function(){
    var w = $(window).width();
    $('your-banner').css('height',w*30%);//<--this will set banner height 30% of screen width
});