在视口调整大小而不切断边的情况下调整图像大小

Question

我有一个CSS问题.我有一个1024x500像素的图像.现在的问题是,只要浏览器窗口/视口的宽度变化低于图像宽度(1024px),图像就会开始被切断.现在,正如您所看到的,当视口大小低于1024px时,我将容器宽度设置为100%,并且它按比例调整大小,但随着浏览器调整大小(更小),我的图像的边会越来越多.

任何人都可以帮助我让我的图像动态调整像素为像素(不丢失任何原始图片 - 没有切断)？

查看我的网页并调整浏览器窗口大小以查看我的意思.注意图像的两侧被切掉......

HTML:请注意我的原始图像是1024x500

 <div class="ei-slider">
 <ul class="ei-slider-large">
   <li>
   <img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
   </li>
 </ul>
 </div>

CSS:

大屏幕的普通CSS

.ei-slider{
    position: relative;
    width: 1024px;
    height: 500px;
    margin: 0 auto;
}
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
}
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ei-slider-large li img{
    width: 100%;
}

当浏览器窗口低于图像宽度时:1024px:

@media screen and (max-width : 1023px){
    .ei-slider{
        width: 100%;
    }   
}

对于切断我的图像时较小的屏幕:注意我的原始图像是1024x500

@media screen and (max-width: 930px) and (min-width : 831px){
    .ei-slider{
        width: 100%;
    }   
    .ei-slider-thumbs li a{
        font-size: 11px;
    }
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: visible;
    height: 100%;
    width: 100%;
    }
    .ei-slider-large li img{    /*HERE IS MY PROBLEM*/
        width: 930px;
        height: 454px;
    }
}

谢谢!

Answer 1

你用:

max-width: 100%;
height: auto;
width: auto; /* for ie9 */

这将使您为css指定的任何内容动态调整大小以适应基于max-width:100%语句的容器.如果您希望采用不同的方式,请相应地更改max width语句.