0

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

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

beta url 是http://www.can-do.org/beta/ （同样，我认为它适用于 IE，我只在 Chrome/firefox 中看到它）

4

3 回答 3

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;}
}
于 2013-05-07T03:00:19.043 回答
0

由于您使用的是 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
});
于 2013-05-07T05:00:38.870 回答
0

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

首先，在此处更改包装器 div：

<div align="center">

对此

<div class="pluswrap">

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

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

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

（我不能真正远程正确​​地发短信，但值得一试。它似乎确实有效，但我无法刷新页面并查看页面加载时会发生什么，因为临时样式会被擦除。会热衷于知道它是否有效。）

于 2013-05-07T05:18:29.633 回答