web-dev-qa-db-ja.com

流体幅コンテナで画像（<img>）を中央にトリミングする方法

流体幅（パーセントベース）コンテナが画像全体を表示するには小さすぎる場合、画像を中央に配置するにはどうすればよいですか？

enter image description here

コンテナ内で画像を中央に配置する方法

これは、コンテナが小さすぎる場合、側面ではなく画像の中央を表示する必要があることを意味します。

cssimageresponsive-designfluid-layoutfluid-images
50
Bryce

うまくいくとき

幅がそれぞれ50％である2つの<div>sなどのコンテンツを保持するコンテナがあり、隣同士に座っている場合があります。この例では、コンテナの子を1つだけ説明できます。 enter image description here

外側の長方形を.container、内側の長方形を.content、画像をimgと名付けます。この配置は完璧です.contentがimgより常に広い限り

壊れたとき

パーセンテージを扱っており、おそらくレスポンシブデザインを扱っているので、これが常に当てはまるとは限りません。 .contentがimgよりも薄い場合、切り取りが発生します。

enter image description here

問題

imgの最も興味深い部分が中央にある場合、ブラウザーで両方のエッジを均等にトリミングする必要があります。.contentの幅に関係なく、その最良の部分を表示したままにします。

enter image description here

ソリューション

幸いなことに、解決策は可能です。さらに良いことに、追加のマークアップは必要ありません。

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}
98
Bryce

新しいブラウザの場合は、翻訳できます

figure{
    width: 100%;
    text-align: center;
    overflow: hidden;
}
img{
    position: relative;
    left: 50%;
    transform: translate(-50%,0)
}

IE8をサポートするために、@ BryceHanscombが上記で提示した手法を引き続き使用できます。

.no-csstransforms figure img {
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}
19
Gabriela Gabriel

表示される画像がディスプレイコンテナよりも非常に長くなると予想している場合は、左に100％を設定します。左マージン：-200％; （ブライスの答えから）画像の中央部分を取得するには不十分かもしれません。両方に大きなパーセンテージを付けるだけです。ただし、もう一方が他方の半分であることを確認してください。

left: 500%;
margin-left: -1000%;
1
jbdeguzman