Question

我有一个横幅滑块，我强制100％宽度。问题是当它加载时，第一张幻灯片没有显示（至少在chrome上），我必须等待第二张幻灯片“滑动”...然后一切都向下推，看起来应该如此。如果我设置一个固定的高度它工作正常，但我的分辨率是1900，不同的分辨率屏幕看起来很糟糕，其中一个锁定高度。

我想知道是否有办法计算访客分辨率和横幅尺寸，以根据负载的100％宽度找出合适的高度。

测试版网址为http://www.can-do.org/beta/ （再次，我认为它适用于IE，我只在Chrome / firefox中看到它）

Answer 1

使用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;}
}

Answer 2

由于您使用的是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
});

Answer 3

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

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

<div align="center">

到这个

<div class="pluswrap">

然后，将这些样式添加到CSS文件中：

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

幻灯片放映高度始终是宽度的30％，因此30％底部填充设置为在任何屏幕尺寸下保持容器div对该尺寸开放。

（我无法在远程正确地发送文本，但值得一试。它似乎确实有效，但我无法刷新页面，看看页面加载会发生什么，因为临时样式会被擦除。但是，我很想知道它是否有效。）

根据宽度计算横幅的高度

3 个答案: