html - 大きな画像を DIV の中央に配置する

Question

大きな画像を小さな div の中央に配置 (&crop) しようとしています。これが私がそれをどのように見せたいかです：

画像は単に div の中央に配置されます。画像がどれだけ大きくても小さくても構いません。

何か案は？

Answer 1

transformと組み合わせてposition:absolute使用​​できます

<div class="container">
    <img src="http://lorempixel.com/500/400/sports/1/" />
</div>

と

.container {
    width:200px;
    height:200px;
    position:relative;
}
.container img {
    /*position it starting at the center*/
    position:absolute;
    left:50%;
    top:50%;

    /*move it back by 50% of the image*/
    transform-origin: 50% 50%;
    transform:translate(-50%,-50%);
}

http://jsfiddle.net/4nH3A/1/のデモ

---

それもトリミングしたい場合は、同様に追加overflow:hiddenしてdivください。

http://jsfiddle.net/4nH3A/2/のデモ

Answer 2

次のように使用できます。

<div id="myimg"></div>

CSS

#myimg{width: 200px; height: 200px; background: url() no-repeat center; background-size: cover;}

Answer 3

標準の CSS レイアウトに固執するようにしてください。overflow:visible を使用して要素を「不足」させようとすると、問題が発生します。

HTML5 キャンバスを試す必要があります。これdrawImage()は、トリミングとサイズ変更の両方に役立ちます。

Answer 4

background-image:center;

また

text-align:center;