У меня проблема с CSS. У меня есть изображение размером 1024x500 пикселей. Теперь проблема в том, что всякий раз, когда окно / область просмотра браузера изменяет ширину ниже ширины изображения (1024 пикселей), изображение начинает обрезаться. Теперь, как вы можете видеть, я установил ширину контейнера на 100%, когда размер области просмотра становится меньше 1024px, и он пропорционально изменяет размер, но стороны моего изображения обрезаются все больше и больше по мере изменения размера браузера (меньшего).

Может ли кто-нибудь помочь мне сделать так, чтобы мое изображение динамически изменяло пиксель на пиксель (без потери оригинального изображения - без обрезки)?

Проверьте мойстраница интернета и измените размер окна браузера, чтобы увидеть, что я имею в виду. Обратите внимание на то, что стороны изображений обрезаются ...

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;
    }
}

Спасибо!