适合图像（S）在液体家长

我想在液体布局（父）呈现的图像滑块，我不喜欢限制高度和图像的使用，而他们可以通过大屏幕显示器请求（27“）小到11”或更小。如果有插件可以帮助我解决这个问题，请让我知道吗？现在我使用滑块（插件 - NIVO），它有一个固定的布局，我不能将其更改为液体这里是代码，我有： HTML适合图像（S）在液体家长

<!DOCTYPE HTML> 
<html> 
<head> 
<title>GALLERY</title> 
</head> 
<body> 
<div id="row_1"> 
<div class="container"></div> 
</div> 
<div id="row_2"> 
<div class="container"> 
<div id="slideshow"> 
<div id="slider"> 
<img src="img/1.jpg" title="" style="" /></div>  
<img src="img/2.jpg" title="" style="" /></div> 
<img src="img/3.jpg" title="" style="" /></div> 
<img src="img/4.jpg" title="" style="" /></div>  
</div> 
</div> 
</div> 
</div> 
<div id="row_3"> 
<div class="container"></div> 
</div> 
</body> 
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
    } 
html{ 
    height:100%; 
    width: 100%; 
    } 
body { 
    background-color: #272321; 
    height:100%; 
    width: 100%; 
    } 
#row_1 { 
    position:relative; 
    height:15%; 
    width: 100%; 
} 
#row_2{ 
    position:relative; 
    height:77%; 
    width: 100%; 
    } 
    #row_3{ 
    position:relative; 
    height:8%; 
    width: 100%; 
    background-color: #151110; 
    } 
    .container{ 
    position:relative; 
    margin: 0 auto; 
    height:100%; 
    width: 80%; 
    }

您是否认为如果使用不同屏幕尺寸的多种布局是一个好主意？有没有办法用JQuery来解决这个问题？

来源

2012-07-15 Behseini

我不知道预罐装的插件，但它没有太多的自己的代码来处理这个问题。

您可以将一个事件处理程序窗口大小调整，检查你的div容器的大小，并用自己的JavaScript来选择新的图像尺寸基础上，新的容器大小的幻灯片。

使用稍有延迟，以防止调整大小期间运行数百次的代码，它可能看起来像这样：

(function() { 
    var pauseTimer; 

    $(window).resize(function() { 
     // clear any previous timer running 
     if (pauseTimer) { 
      clearTimeout(pauseTimer); 
     } 
     // set new timer 
     pauseTimer = setTimeout(function() { 
      // user finished or paused resizing, 
      // so now we can recalculate slideshow size 
      pauseTimer = null; 
      // examine the size of your container div 
      // select a new size image for your slideshow and load those images here 
     }, 500); 
    }) 
})();

这里有一个演示：http://jsfiddle.net/jfriend00/Tucf2/

来源

2012-07-15 19:39:04 jfriend00

感谢friend00是否确定你让我知道在哪里可以找到这样的样本？ – Behseini 2012-07-15 19:49:53

@ user1106951 - 你是什么意思“样本”？我提供了用于检测调整大小的示例代码。将幻灯片重置为新尺寸取决于您。 – jfriend00 2012-07-15 19:59:47

添加了一个演示链接到我的答案。 – jfriend00 2012-07-15 20:20:05

适合图像（S）在液体家长

回答

相关问题