保持图像的长宽比
问题描述:
我有以下代码:保持图像的长宽比
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;
}
答
如果您指定静态父级维度并将图像设置为具有相同的尺寸,那么它将失去宽高比。要保留它,请删除尺寸width: 100%
或height: 100%
中的一个。
而不是background-image
使用实际图片标记。
答
你#slider
width
小于width
总和。
如果图片大小为400px
,#slider
width
必须是800px
。