2011-12-03 28 views
6

Iはwidth:100%overflow:hidden
有する親DIVを有する私はその内部2500-3000pxの画像を配置する必要はなく、水平方向中心画像(左トリミングおよび右)が主中央部を有します画像の小さい画面に表示されますが、水平スクロールバーは表示されません。
background-imageはイメージがPHP経由で動的に追加されるため使用できません。
助けてください。中央画像:隠されたDIV

答えて

10

あなたは(すなわち、それらはすべて同じです)事前に画像の幅と高さを知っているなら、あなたは古いmargin/positionトリックを使用することができます

#myImage { 
    height: the image's height; 
    left: 50%; 
    margin-left: -half the image's width; 
    margin-top: -half the image's height; 
    position: relative; 
    top: 50%; 
    width: the image's width; 
}
0

セイmyImg.jpgは100x100pxです:

<div style="overflow:hidden; width:100%;"> 
    <img src="myImg.jpg" style="left: 50%; top:50%; position:relative; margin:-50px 0 0 -50px; width:100px; height:100px;" /> 
</div> 
1

CSS:

div {background:salmon; width:100%; height:200px; overflow:hidden;} 
img {left: 50%; margin-left:-1500px; position:relative;} 

HTML:

<div><img src="" /></div> 

Demo

関連する問題