我正在尝试以液体布局(父级)呈现图像 slider ，并且我不喜欢限制图像的高度和宽度，而大屏幕显示器(27 英寸)可以请求它们到 11 等小屏幕“甚至更少。 你能告诉我是否有插件可以帮助我解决这个问题吗？ 现在我正在使用具有固定布局的 slider (插件 - Nivo)，我无法将其更改为液体 这是我的代码: HTML
<!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 解决这个问题吗？
最佳答案
我不知道预制插件，但处理这个问题的代码并不多。
您可以将事件处理程序附加到窗口调整大小、检查容器 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);
})
})();
关于jquery - 使图像适合液体父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11494948/