Изменение размера изображений при изменении размера области просмотра без обрезки сторон

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

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

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

HTML :Обратите внимание, что мое исходное изображение имеет размер 1024x500

 
  • Vertical Sunbed TanCan

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

Благодарю вас!

0
задан Paolo 15 November 2013 в 14:40
поделиться