任意のビューポートの中央の画像を伸ばすことなく

Question

私は画像を表示する必要がある3つの異なるボックスサイズを持っています。画像はボックスの幅と高さ全体を取りますが、伸ばすべきではありません。画像をトリミングして中央に配置できます。ここで

は一例です： https://jsfiddle.net/y1zn0mxy/

あなたは3種類のサイズを確認した場合、あなたはそれが第一及び第二のケースではなく、最後の1で動作していることがわかります。私は、画像タグのサイズを交換する場合は、最後のいずれかで動作します：

width: 100%; 
height: auto; 

しかし、それは最初の二つでは動作しません。

これを達成する他の方法はありますか？

Answer 1

最後の画像が高さの値よりも高い幅の値を持つ唯一の画像なので、最後の画像の新しいクラスを作成します（私はjsfiddleでlandscape2と呼んでいます）。そして、これを追加します。それは正常な動作です

.landscape2 { 
    width:100%; 
} 

https://jsfiddle.net/y1zn0mxy/2/

Answer 2

。それは正常な動作です。画像が伸びるため、両方の軸を100％に設定することはできません。水平のランドスケープにクラスを追加しないでください：https://jsfiddle.net/y1zn0mxy/1/？

あなたはCSSプロパティでそれを置き換えることができ<img ... />を必要としない場合：

• 背景
• のbackground-position
• 背景サイズを：あなたが見ることができる。ここ

をカバー再現：https://jsfiddle.net/y1zn0mxy/3/

Answer 3

あなたは単純に目的のefあなたのイメージを<img />タグの代わりに背景イメージとして挿入することによって、利点は、画像タグとCSSをそれらに適用する必要がないことです。 background-size: cover;を使用して、イメージを常にビューポートに合わせてください。この方法では、CSS backgroundプロパティでコードを大幅に減らし、画像を制御できます。

.img { 
 
    background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
}

<div style="width:300px; height:250px; margin: 30px; background: black; float: left;"> 
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"></div> 
 
</div> 
 

 
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;"> 
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"></div> 
 
</div> 
 

 
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;"> 
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"></div> 
 
</div>

Answer 4

アンドレアス良い答えに加えて、あなたはこれを処理するための新しい方法を持っています。

オブジェクトフィットを使用して画像内のbackgroound-size：coverと同じ機能を実現できます。

それとして広くsuported（IE /エッジで無対応無し）が、

img { 
 
    position: absolute; 
 
    top: -100%; 
 
    right: -100%; 
 
    bottom: -100%; 
 
    left: -100%; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">  
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"> 
 
     <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" /> 
 
    </div> 
 
</div> 
 

 
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">  
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"> 
 
     <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" /> 
 
    </div> 
 
</div> 
 

 
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">  
 
    <div class="img box" style="padding:0; width: inherit; height: inherit;"> 
 
     <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" /> 
 
    </div> 
 
</div>