`background-size` CSSプロパティがhtmlのために動作しない<image>タグ

Question

イメージソースをCSS background-imageというプロパティで設定するとうまくいきますが、イメージソースをHTMLで設定すると完全に破損します。どうして？

.image1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-size: cover; 
 
} 
 

 
.image2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-size: cover; 
 
    background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg'); 
 
}

<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img> 
 

 
<img class="image2"></img>

このイメージが正しく何mattery幅/高さの組み合わせを示さないために聞かせて、私はCSSからそのソースを宣言するように強制していますか？

---

編集：質問downvoteが、私はちょうどイメージがそう、彼らはあなたが両方変更しても、元のアスペクト比を維持することができ、自動的にクロップさせることが可能だったかどうかを知りたかったため...だったかわかりませんそれらの高さと幅は独立している。これは、背景画像を使用すると完璧に動作しますが、明らかに内容ではありません。いずれにせよ、私は今私の答えを得た。

Answer 1

IE以外のブラウザでは、background-sizeの代わりにobject-fit: coverを使用できます。

.image1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    object-fit: cover; 
 
} 
 

 
.image2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-size: cover; 
 
    background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg'); 
 
}

<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img> 
 

 
<img class="image2"></img>