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

Question

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

这是我的 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;
}

Answer 1

您需要使用 css 媒体查询并像这样在 x 宽度位调整 img 的大小

 @media screen and (max-width: 800px) {

     img {
       width:300px
      }
  }

@media screen and (max-width:1200px) {
          img {
       width:600px
      }
  }

这是一个指向 css 的链接由网站搜索@media 使用