画像を強制的にフィットさせてアスペクト比を維持する

Question

画像をコンテナの幅の100％で塗りつぶし、最大高さのプロパティを設定したいと思っています。画像の一部が失われます。

img { 
    max-height:200px; 
    width:100%; 
} 

私は同じようなことがbackground-sizeプロパティを使用して行うことができます知っているが、私は、インライン<img>タグにこれを作りたいです。

私はこの使用してCSSを達成できる方法の任意のアイデア？またはjavascript？

Answer 1

あなたはCSS3 object-fitしてみてください、とブラウザのサポートtablesを見ることができます。

CSS3 object-fit/object-positionオブジェクト（画像またはビデオ） そのボックス内に収まるべきか指定する方法。 object-fitオプションは、オブジェクト位置がオブジェクトを の位置に戻すことができるように、「包含」（態様 の比率に従ってフィット）、「塗りつぶす」（塗りつぶすオブジェクトを伸ばす）および「覆う」（ボックス をオーバーフローするが比率を維持する）を含む。背景画像のように。

JSFIDDLE DEMO

.container { 
 
    width: 200px; /*any size*/ 
 
    height: 200px; /*any size*/ 
 
} 
 

 
.object-fit-cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; /*magic*/ 
 
}

<div class="container"> 
 
    <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"> 
 
</div>

---

関連情報：

• Exploring object-fit ★ Mozilla Hacks

• Polyfill for CSS object-fit property