我有以下代码:
HTML
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
</body>
CSS
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
.slide {
float: left;
list-style-type: none;
width: 100%;
height: 100%;
}
/* helper css, since we don't have images */
.slide1 {background: url(http://lorempixel.com/400/200/);}
.slide2 {background: url(http://lorempixel.com/320/180/);}
.slide3 {background: url(http://lorempixel.com/150/300/);}
.slide4 {background: url(http://lorempixel.com/480/220/);}
.slide5 {background: url(http://lorempixel.com/220/200/);}
如果你看一下 jsfiddle您可以看到图像没有保持一致的纵横比。如何让所有图片都具有相同的纵横比?
最佳答案
试试这段代码
.slides{
height:100%;
width:auto;
float:left;
}
关于javascript - 保持图像纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36640057/