`background-size` CSS-Eigenschaft funktioniert nicht für HTML <image> Tags

Question

Es funktioniert gut, wenn ich die Bildquelle als CSS background-image -Eigenschaft festlegen, aber es bricht ganz, wenn ich die Bildquelle über HTML festlegen. Warum?

.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>

diese Bilder richtig keine mattery die Breite/Höhe Kombination anmerken zu lassen, bin ich ihre Quelle von CSS zu erklären gezwungen?

---

bearbeiten: nicht sicher, was die Frage war für Downvote ... Ich kann es nur wissen wollte, wenn möglich war Bilder zu lassen automatisch so beschnitten werden, können sie ihr ursprüngliches Seitenverhältnis beibehalten, auch wenn Sie beide ändern ihre Höhe und Breite unabhängig voneinander. Das funktioniert einwandfrei bei Hintergrundbildern, aber anscheinend nicht mit Inhalt. Wie auch immer, ich habe jetzt meine Antwort bekommen.

Answer 1

In anderen Browsern als IE können Sie object-fit: cover anstelle von background-size verwenden.

.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>