如何防止img在div中调整大小

Question

我在滑块中有一些图像，当我调整浏览器大小时，我试图阻止它们以相同的比例自动调整大小。我想要实现的是图像保持相同的高度和略有不同的宽度，直到浏览器通过@media查询到达断点。
它正是您在调整浏览器大小时使用滑块获得的http://www.worldwildlife.org/。

这是我的HTML：

<div id="content">
    <ul class="rslides" id="slider1">
         <li><img src="../Img/001.jpg" alt="foto" /></li>
         <li><img src="../Img/002.jpg" alt="foto2"/></li>
         <li><img src="../Img/003.jpg" alt="foto3"/></li>
     </ul>
</div>

和CSS：

#fondo3 {
    background-color: black;
    position: absolute;
    right: 0;
    left:0;
    top:10%;
    margin: 0;
    z-index: 10;
    width:auto;
}

.rslides {
    min-width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}