歪みのない画像を表示するには、<img>タグのCSSプロパティとは何ですか？

Question

この質問は非常に奇妙に思えるかもしれないが、ここでは契約があります：

私は、他の日にいくつかの記事に会って、絵自体をストレッチすることなく、タグの幅と高さを変更することはでき<img>タグのCSS画像の表示プロパティを、見ました。

最終的な効果はoverflow: hidden;のように見えますが、親コンテナはありません。

その記事とプロパティの名前をブックマークすることを忘れました。誰かが私にプロパティの説明を教えてもらえますか？

Answer 1

私はあなたがobject-fit CSSのプロパティを探していると思います。

img { 
 
    width: 100px; 
 
    height: 200px; 
 
    } 
 
img.noStretch{ 
 
    object-fit: cover; 
 
    }

<img src="http://lorempixel.com/200/200"/> 
 

 
<img class="noStretch" src="http://lorempixel.com/200/200"/>

Answer 2

代わりにラッパーが必要な場合や、代わりに背景スタイルを使用する場合があります。私sugesstionについては

：

#img { 
 
    display: inline-block; 
 
    width: 160px; 
 
    height: 120px; 
 
    background: 50% 50% no-repeat; 
 
    background-size: cover; /* try also: contain or 100% */ 
 
}

<div id="img" style="background-image: url(https://www.gravatar.com/avatar/0217df290e6f29cbe204479f48fb662f?d=identicon&r=PG)"></div>

私はそれはあなたが何をしたいと思います。