Iはwidth:100%
とoverflow:hidden
有する親DIVを有する私はその内部2500-3000px
の画像を配置する必要はなく、水平方向中心画像(左トリミングおよび右)が主中央部を有します画像の小さい画面に表示されますが、水平スクロールバーは表示されません。
background-image
はイメージがPHP経由で動的に追加されるため使用できません。
助けてください。中央画像:隠されたDIV
6
A
答えて
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>
関連する問題
- 1. 画像を中央の小さなdivに配置する
- 2. は隠されたdivの中
- 3. 描画された矩形の中央に画像を追加する[iPhone]
- 4. Div水平中央と垂直中央
- 5. キャプションは画像の中央に表示されません
- 6. さえずり - ブートストラップ中央カルーセル画像画面サイズ
- 7. ディスプレイ中央の画像の列
- 8. キャンバスの中央に画像を描く
- 9. 画像を中央に拡大する
- 10. 中央の画像と切り抜く
- 11. 画像を中央に配置
- 12. 画像が中央にあるプログレスバー
- 13. CSSで画像の中央を見る
- 14. 中央のブートストラップウィンドウのサイズが変更されたときのカルーセル画像
- 15. ショー隠されたdivの
- 16. DIVでの中心画像
- 17. 中央揃えのDIV
- 18. 全幅divの中央ラッパー
- 19. div内のdivの中央揃え
- 20. ブートストラップ3に中央DIVの中心ブロック
- 21. 隠す李壊れた画像
- 22. 画像が伸びて中央に配置されていますか?
- 23. 背景画像のビューポートは中央に配置されていますか?
- 24. ホバー上の画像上に中央のテキストが表示される
- 25. Nivo Sliderで示される画像を中央に置く方法
- 26. 画面の中央にScaleAnimationで画像を拡大する
- 27. 画面の中央に画像を挿入するKivy Python
- 28. は、画面の中央にそれを方向付けるために、画像を回転させ
- 29. 画面ビューの中央に絶対divを配置します
- 30. 背景画像トグルと隠された選択チェックボックス