我有一个CSS问题。我有一个1024x500像素的图像。现在的问题是,无论何时浏览器窗口/视口宽度低于图像宽度(1024px),图像开始被切断。现在您可以看到,当视口大小低于1024像素时,我将容器宽度设置为100%,并且它按比例调整大小,但随着浏览器调整大小(更小),图像边缘会越来越多地被切断。调整图像大小调整图像大小而不切断边框
任何人都可以帮助我得到我的图像动态调整像素的像素(不失去任何原始图片 - 没有切断)?
查看我的webpage并调整浏览器窗口的大小以查看我的意思。注意图像的党派未能得到切掉......
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;
}
}
谢谢!
谢谢你的回答,但它并不完全是我想要它做的......在它仍然失去像素在屏幕的左侧,有一个恼人的填充上右侧...看看我上面链接的网站并调整大小... – DextrousDave 2012-07-27 15:41:00
你的网站似乎被我拦截,你可以做一个jsfiddle来说明问题吗? – 2012-07-27 16:08:24
嘿,我发现问题与我的代码...上面给出的解决方案的工作,问题是与我包括一个JavaScript文件,管理这里提到的滑块图像的宽度和高度...每当我排除该文件,问题就消失了,它调整得很好......所以除非你很了解Jquery,否则你可以提供帮助。感谢您的回答 – DextrousDave 2012-07-28 12:12:49