У меня проблема с CSS. У меня есть изображение размером 1024x500 пикселей. Теперь проблема в том, что всякий раз, когда окно браузера/область просмотра изменяет ширину ниже ширины изображения (1024px ), изображение начинает обрезаться. Теперь, как вы можете видеть, я установил ширину контейнера на 100%, когда размер окна просмотра становится меньше 1024 пикселей, и он изменяется пропорционально,но стороны моего изображения обрезаются все больше и больше по мере того, как браузер изменяет размер (меньше ).
Может ли кто-нибудь помочь мне заставить мое изображение динамически изменять размер пикселя за пикселем (без потери исходного изображения -без обрезки )?
Загляните на мою веб-страницу и измените размер окна браузера, чтобы понять, что я имею в виду. Обратите внимание на то, что края изображений обрезаются...
HTML :Обратите внимание, что мое исходное изображение имеет размер 1024x500
. 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;
}
}
Благодарю вас!