保持图像宽高比

Question

我有以下代码：

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，你会发现图像没有保持一致的宽高比。如何让所有图像具有相同的宽高比？

Answer 1

如果指定静态父级尺寸并将图像设置为具有相同的尺寸，则会失去它的纵横比。要保持其移除维width: 100%或height: 100%之一。

而不是background-image使用实际的图片代码。

Answer 2

试试这段代码

.slides{
    height:100%;
    width:auto;
    float:left;
}

Answer 3

您的#slider width小于.slide width总和。

如果图片尺寸为400px，则#slider width必须为800px。