[英]How to make a div with multiple images responsive?
i'm doing a slider and my idea is making a div, and put inside the 4 images. 我正在做一个滑块,我的想法是制作一个div,并放入4张图像中。 Images will stack one above the other (with position: absolute), and will have width: 1013px, max-width: 100%, height: auto(to be responsive).
图像将堆叠在另一个之上(位置:绝对),并且宽度:1013px,最大宽度:100%,高度:自动(待响应)。 The problem is that, if a don't give the parent div a height, i can't hide the overflow, but if i do, when the screen is small, the height will be the same, so you can see for example, the half of the second image.
问题是,如果不给父div设置高度,我将无法隐藏溢出,但是如果我这样做,则当屏幕较小时,高度将是相同的,因此您可以看到例如第二张图片的一半。
I made this fiddle for you to understand: 我做了这个小提琴供您理解:
http://jsfiddle.net/bS69a/ http://jsfiddle.net/bS69a/
And my code: 而我的代码:
html HTML
<div class="slider">
<img src="http://k40.kn3.net/4/2/2/9/D/8/593.jpg" alt="slider" />
<img src="http://k32.kn3.net/1/0/C/9/6/1/D4F.jpg" alt="slider" />
</div>
css CSS
.slider{
margin: auto;
width: 90%;
text-align: center;
}
.slider img{
width: 100%;
max-width: 600px;
}
media queries and breakpoints might help. 媒体查询和断点可能会有所帮助。
Bootstraps Commonly used breakpoints: Bootstrap 3 breakpoints and media queries 引导程序常用断点: 引导程序3断点和媒体查询
Rought example below or live example link: http://jsfiddle.net/bA7wx/ (resize example window on jsfiddle example) 下面的可出售示例或实时示例链接: http : //jsfiddle.net/bA7wx/ (jsfiddle示例上的调整示例窗口大小)
html HTML
<div class="slider">
<img src="#url" alt="slider" />
<img src="#url" alt="slider" />
<img src="#url" alt="slider" />
<img src="#url" alt="slider" />
</div>
css CSS
.slider{
width; 100%
height: auto;
}
.slider img{
width: 24%;
}
@media (max-width: 992px) {
.slider img{
width: 48%;
}
}
@media (max-width: 768px) {
.slider img{
width: 48%;
}
}
@media (max-width: 480px) {
.slider img{
width: 90%;
margin; 0 auto;
}
}
If what you're after is a containing <div>
that always adjusts to the screen size of the current visiting device, you could use availHeight
and $( window ).resize()
like so: 如果您所追求的是一个包含
<div>
,该内容始终会调整为当前访问设备的屏幕尺寸,则可以使用availHeight
和$( window ).resize()
如下所示:
$( window ).resize(function() {
var screenHeight = window.innerHeight;
$('#yourdiv').css('height', screenHeight);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.