Question

一个CSS问题。overflow:hidden， 怎么能显示中间的，两边的超出部分隐藏呢？求高手帮帮忙呀~

代码：
<ul>
<li style="float:left;display:inline;margin-right:25.0px;width:210.0px; height:300.0px; overflow: hidden;">
<img src="http://i02.c.aliimg.com/img/ibank/2013/119/498/983894911_1641179427.jpg" width="310" height="310" style="float: right;" /></li>
</ul>

Answer 1

2种方法，

1 把图片弄成背景图

<li style="float:left;display:inline;margin-right:25.0px;width:210.0px; height:300.0px; overflow: hidden;background:url() no-repeat top center;">
</li>

2 js控制

给li一个id 例zz

给body一个onload事件 Onload

function Onload(){
	var zzl=document.getElementById('zz').clientWidth;
	var zzi=document.getElementById('zz').getElementsByTagName('img')[0].clientWidth;
	document.getElementById('zz').getElementsByTagName('img')[0].style.marginLeft=-(zzi-zzl)/2+'px';
}
//当然上面js控制也可以把img的position写成ralitive  然后可以控制left 方法一样

追问

还有别的方法么？ js会被系统剔除的。背景图也不行的

追答

图片直接style="margin-left:-50px;"

Answer 2

你设置了overflow：hidden：溢出隐藏了。

追问

现在是超出的部分，右边就会被隐藏掉，我是想能不能把超出的两边隐藏掉，而显示中间的一块。比如图片中，红色是会显示的区域，灰色是原图片。那么现在效果是1.我要2的效果。。。。