我有一个 CSS 问题。我有一个 1024x500 像素的图像。现在的问题是,每当浏览器窗口/视口的宽度更改为低于图像宽度(1024 像素)时,图像就会开始被截断。现在如您所见,当视口大小低于 1024 像素时,我将容器宽度设置为 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;
}
}
谢谢!