HTML/IE: Bild strecken, um es einzupassen, Seitenverhältnis beibehalten

Question

In einem HTML-Fenster setze ich einen benutzerdefinierten Body

<img src="file://[filename]">

um ein Bild anzuzeigen.

Jetzt möchte ich das Bild so strecken, dass es in das verfügbare Fenster passt, aber das Seitenverhältnis erhalten bleibt.

<img src="file://[filename]" width="100%" height="100">

streckt, aber auch verzerrt das Bild.

Kann man das mit einem HTML-Trick erreichen? IE nur Lösung ist in Ordnung, da dies in einem gehosteten Browser-Steuerelement ist.

Answer 1

Diese Version des Codes von @hfarazm macht ein div, in dem das Bild in voller vertikaler Größe horizontal zentriert ist, wenn Sie es in voller Größe horizontal machen, würde es vertikal zentriert sein, ich denke, es ist der beste Weg, ohne js zu benutzen (mit Tommybananas Code kann es möglich sein, es vollständig zu machen) oder php oder etwas anderes: HTML

<div class="centeredImage">
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg">
</div>

CSS

.centeredImage {
    height: 500px;
    width: 500px;
    background: rgba(0,0,0,0.0);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.centeredImage img {
    margin: auto;
    width: 500px;
}

http://jsfiddle.net/5p0ugfLw/

Answer 2

Reines HTML nein.

Dies kann in JavaScript geschehen, wenn Sie das Seitenverhältnis des Bildes kennen. Ich weiß nicht, ob das über JS möglich ist, aber Sie könnten diesen Wert an das JavaScript übergeben, wenn Sie eine andere Sprache verwenden.