Scale und center image in variable-size-div mit JS

http://jsfiddle.net/3qMnM/1/

HTML:

<div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400">
</div>

CSS:

.image {
height: 100%;
width: auto;
margin-right: 200px;
}


.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}

Ich versuche skalieren Sie die Bilder unten (nie) dynamisch zu passen in das Bild-div (ohne beschneiden), die ist variabel in der Höhe (100%) und die Breite (auf auto eingestellt). Das Bild muss auch zentriert (horizontal und vertikal) und gleichen padding von einigen Pixeln oben und unten.

Wird eine info-Tafel neben dem Bild-container, wie Sie sehen können, in die Geige, aber ich bin mir nicht sicher, ob dies relevant ist.

Tun, meine Aussagen machen Sinn?

Dank, ich habe viel zu viel Zeit mit dem Experimentieren mit diesem bereits! :/

InformationsquelleAutor Lennart | 2013-05-22
  1. 2

    Wenn ich das richtig verstehe, willst du etwas wie diesem.

    Skaliert werden, nach unten, wenn das Bild zu groß ist, aber behält die ursprüngliche Größe, wenn es passt in die Fenster. In anderen Worten, es kann nie Schuppen oben - nur nach unten.

    Ist es eine Kombination von CSS und etwas jQuery:

    Diese kurze JS zentriert das Bild vertikal:

    function verticallyCenterImage(){
    var $img = $('.image img'),
        windowHeight = $(window).outerHeight();

    if($img.height() < windowHeight){
        var delta = windowHeight - $img.height();
        $img.css('margin-top', (delta / 2) + 'px');
    }else{
        $img.attr('style', '');
    }
}

    Und diese Zeile CSS hält das Bild horizontal zentriert:

    .image {
    padding-right: 200px;
    text-align: center;    /* <- this one */
    max-height: 100%;
    overflow: hidden;
}

    Und halten Sie die original-Größe des Bildes, ich habe gerade die max Höhe und Breite auf die img innerhalb der .image - Klasse, etwa so:

    .image img {
    max-width: 96%;
    max-height: 96%;
    margin: 2%;
}

    Können Sie passen Sie die Größe und Ränder um Ihre Bedürfnisse, nur daran erinnern, um Sie in relation zu einander 🙂

    • Genial, das scheint zu tun genau das richtige - vielen Dank! Es gibt eine Sache, ich vergaß: Die Bild-container Höhe nicht gleich der Fensterhöhe in meine Letzte version. Wie würde ich mich über die Berechnung der Höhe des div-statt das ganze Fenster?
    • gerne helfen 🙂 Sie können die Höhe durch die Verwendung einer anderen Auswahl als window für die windowHeight variable, zum Beispiel windowHeight = $("#my-wrapper-div").outerHeight()
    InformationsquelleAutor JAM
  2. 0

    Einige der Techniken, die hier für Sie arbeiten kann:
    http://css-tricks.com/centering-in-the-unknown/

    Den trick, es ist die Verwendung von Tabellen-Elemente oder CSS-2.1-Tabelle anzuzeigen.

    Edit: Weitere Ansätze hier: http://www.vanseodesign.com/css/vertical-centering/

    • Danke, großartige Ressource. Ich wusste von der ersten, aber ich habe nicht herausfinden, Zentrierung in Kombination mit der Skalierung noch nicht. Wird auf jeden Fall Lesen Sie diese, wieder, obwohl ich sicher bin, dass dies erfordert, dass eine JS-Lösung.
    InformationsquelleAutor AndersDJohnson
  3. 0

    Mischen Sie px mit %. Wenn Sie erreichen wollen, dass nur von der CSS, müssen Sie % für beide breiten:

    .image {
    width: 85%;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 15%;
    height: 100%;
    background-color: red;
    right: 0px;
}

    ... ansonsten, musst du den JS zu berechnen, die aktuell zur Verfügung stehende Breite auf der linken Seite und assing es die .image div:

    HTML

    <div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400" />
</div>

    CSS

    .image {
    min-height: 600px;
    width: auto;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: red;
    right: 0px;
}

    JS (jQuery)

    $(document).ready(function() {
    $('.image')
        .css('min-height', 'auto')
        .height($(window).height())
        .width($(window).width() - $('.info-panel').width())
    ;
});
    • Danke! Könnte man erweitern auf die JS-Lösung? E. g., wie würde ich mich über Zentrierung die Bild-vertikal? Könnten Sie, dass in der Geige, auch?
    • Toll. Das scheint das Bild zu beschneiden, obwohl, während ich möchte, dass es nach unten-Skala dynamisch (Sie ändert, wenn ich die Größe des Browsers, und nicht beschneiden). Irgendwelche Ideen? 🙂
    • Oh, tut mir Leid. Antwort von Geige und wieder aktualisiert: jsfiddle.net/3qMnM/3
    InformationsquelleAutor Claudio Bredfeldt
Schreibe einen Kommentar