javascript - 保持图像纵横比

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

试试这段代码

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