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

Wenn Sie das Seitenverhältnis beibehalten wollen, müssen Sie nur eine Dimension angeben, d.h.:

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

Sie können Javascript verwenden, um die maximalen Abmessungen zu bestimmen und die Größe entsprechend anzupassen.

<script type="text/javascript">
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
</script>

Answer 2

Wenn Sie entweder die Höhe oder die Breite kennen, können Sie nur diese einstellen. Die anderen Abmessungen werden automatisch auf der Grundlage des Seitenverhältnisses des Bildes festgelegt.

Answer 3

Nein, dafür müssen Sie Javascript verwenden, und das ist schwieriger als es klingt. Ich habe etwas ähnliches in der anderen Woche, hier; ist die Funktion, die ich für sie erstellt, könnten Sie in der Lage sein, es wieder aneignen

Oh, und es braucht jQuery

function resize_background(){

    var target = $("#background_image");
    var window = $(window);
    var ratio = 1;
    var anchor_point = 200;
    var register_point = 400;

    if(window.width() > min_width){
        ratio = window.width() / min_width;
        target.css("marginLeft", 0);
    }else{
        // center to screen
        // For this project, this aint needed.
        //var left_margin = (window.width() / 2) - (min_width / 2);
        //target.css("marginLeft", left_margin);
    }

    // now figure out anchor stuff
    var top = ((register_point * ratio) - anchor_point) * -1;

    target.width(min_width * ratio);
    target.height(min_height * ratio);
    target.css("marginTop", top);

    $("#trace").text(top);

}

Answer 4

Reine HTML-Lösung: das ist meine Technik.

 .iCon {
    height: 267px;
    width: 520px;
    background-color: #0F3;
    overflow: hidden;
    }
.iCon img {
    margin-right: auto;
    margin-left: auto;
    height: 350px;
    text-align: center;
    display: table-cell;
    margin-top: -50px;
    }

HTML:

<div class="iCon">
   <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>

DEMO: http://jsfiddle.net/PBbcF/

Answer 5

Die Einstellung width = 100% ist nicht gerade eine gute Lösung, da sie die Höhe nicht berücksichtigt und das Element in Y-Richtung aus dem Fenster überlaufen könnte.

Diese Lösung ändert die Größe des Elements einmal beim Laden und auch bei der Größenänderung, indem sie das Seitenverhältnis des Fensters überprüft und feststellt, ob die Höhe 100% oder die Breite 100% betragen soll. Dadurch bleibt das Element FULL immer im Fenster und maximiert, während das Seitenverhältnis erhalten bleibt.

function changeElementSize(){
    // Compare your element's aspect ratio with window's aspect ratio
    // My element was 100w x 80h so mine was 1.25
    if (window.innerWidth/window.innerHeight > 1.25){
        $('#element').css('height','100%');
        $('#element').css('width','auto');
    } else {
        $('#element').css('width','100%');
        $('#element').css('height','auto');
    }
}

$( window ).resize(function() {
    changeElementSize();
});

$( window ).load(function() {
    changeElementSize();
});