画像の位置は背景の位置と同じです

Question

私はウェブサイトで作業しています。私はあなたのように画像をスタイルしたいと思っています。通常の画像にこれと同等のものはありますか？予め

おかげで、

Luuk

EDIT：

画像が応答し、容器内に収容されています。

CSS：

.img-container { 
max-height: 300px; 
overflow: hidden; 
} 

.img-container img { 
max-height: 100%; 
max-width: 100%; 
} 

Answer 1

私が中心に画像を配置するために、このような何かをするだろう。

.img-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    max-height: 100%; 
    max-width: 100%; 
} 

Answer 2

ディスプレイフレックスに行くことができますが、IEのサポートは非​​常に悲惨です。あなたがブラウザのサポートを気にしていれば、あなたは次の例の代わりに行くべきです。

<div class="list"> 
    <div class="item"> 
    <img src="https://unsplash.it/50/40" alt="">  
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/60" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/30" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50" alt=""> 
    </div> 
</div> 

サス：

.list { 
    text-align: center; 
} 

.item { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    height: 5rem; 
    width: 5rem; 
    background: red; 

    img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    } 
} 

も同様に変換する属性の接頭辞を追加してください。

フィドル：https://jsfiddle.net/k433b6up/

Answer 3

あなたの望ましい結果が正確に明確ではないが、ここでは二つの異なる解釈のためのいくつかのオプションがあります

画像の表示プロパティを変更し、そのコンテナへのテキストの配置を設定することがしますコンテナにそれを中心にしながら、ネイティブの高さと幅です維持：

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
    text-align: center; 
} 

.img-container img { 
    display: inline-block; 
    max-height: 100%; 
    max-width: 100%; 
} 

デモ：https://jsfiddle.net/5suo8tbw/

img要素で背景を塗りつぶしたい場合は、object-fit: cover属性の使用を検討する必要があります。これにより、常にコンテナの寸法が満たされ、イメージの縦横比が維持され、コンテナに中央に配置されます。

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
} 

デモ：ポリフィルをチェックアウト、クロスブラウザのサポートについてはhttps://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

：https://jsfiddle.net/5suo8tbw/1/

はここで仕様へのリンクですhttps://github.com/anselmh/object-fit