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

【问题标题】：How to prevent img resize in a div如何防止img在div中调整大小
【发布时间】：2015-05-03 10:47:22
【问题描述】：

我在滑块中有一些图像，我试图阻止它们在调整浏览器大小时以相同的比例自动调整大小。我想要实现的是图像保持相同的高度和稍微不同的宽度，直到浏览器通过@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;
}

【问题讨论】：

您的链接通过使用position: absolute; margin-left: -/*half width of image*/; left: 50%; 来实现img

标签： html css media-queries

【解决方案1】：

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

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

     img {
       width:300px
      }
  }

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

这是站点搜索@media 使用的css 的链接

【讨论】：

【解决方案2】：

我认为您想要实现的是使图像按比例调整大小，保持其纵横比不变，这可以通过使所有元素响应浏览器调整大小来实现。

看看我的例子：

http://codingclown.com/html5-fully-responsive-carousel-using-jquery/

【讨论】：

【解决方案3】：

一种方法是将图像设置为div 的背景，而不是使用img 标签

see this fiddle

调整结果框的大小并查看它的变化

【讨论】：