Frage Wrapping div wird nicht skaliert, wenn das innere Bild skaliert wird (ein Ergebnis der Fenstergrößenänderung)


Ich möchte, dass meine Bilder die Größe ändern, während sich die Höhe des Fensters ändert, während das div-Include beibehalten wird, das das Bild umschließt. Ich habe versucht mit:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

img {
    height: 100%;
    width: auto;
}

Aber es scheint nicht wie erwartet zu funktionieren. Das div schrumpft nicht. Es ist tatsächlich einmal, wenn ich mit den CSS-Eigenschaften im Debugger herumspielen.

Hier ist das Geige (Versuchen Sie, die Größe des Ergebnisbereichs zu ändern)

Aktualisieren:

Das ist jetzt seltsam. Seit ich diese Frage zum ersten Mal gestellt habe, hat sich das Verhalten des Browsers geändert. Ursprünglich (Chrome), wenn ich die Größe des Fensters änderte, würde das Bild proportional wie erwartet schrumpfen, aber das Wrapping div würde seine ursprüngliche Breite behalten. Was passiert jetzt (Chrome-Update?) Ist, dass das Bild nicht horizontal schrumpft und das div auch.

Ich habe es mit den neuesten Safari und Firefox versucht. Beides verkleinert das Bild, behält aber die ursprüngliche div-Breite bei. Bitte überprüfen Sie Ihre Lösungen auch in anderen Browsern.

Update # 2:

Das div muss vom Blocktyp bleiben, da ich andere Elemente in den Ecken des Bildes platzieren muss.


9
2018-05-18 06:52


Ursprung


Antworten:


Ich schätze, du musst auf JavaScript zurückgreifen:

$(window).on('resize', function (){ 
    $('div').width($('img').width());
});

JSFIDDLE


3
2018-05-24 05:36



Sie müssen nur Ihr Image behalten max-height 100% sein. Das ist es.

Hier ist das Arbeitslösung

Der HTML:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

Das CSS:

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline;
}

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

BEARBEITEN

Aktualisiert CSS für die img Klasse, um das Bild zum vollständigen div. Hier ist das Arbeitslösung für die Bearbeitung.

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

Hoffe das hilft.


3
2018-05-24 05:38



Ich hatte ein bisschen auf Ihrer Geige, aber ich glaube nicht, dass Browser die Breite eines ändern werden div basierend auf der Breite des Bildes im Inneren änderte es seine Breite, ich habe ein paar Dinge ausprobiert, konnte es aber nicht zum Laufen bringen.

Ich kann jedoch einen anderen Ansatz zum Platzieren von Elementen in den Ecken des Bilds zur automatischen Größenänderung vorschlagen. Anstatt diese Elemente in ein div das auch das Bild hält, könnte man das Bild einfach schweben lassen und etwas schweben lassen divist mit einer festen Breite auf der rechten und linken Seite des Bildes, und dann machen Sie diese divIn das Bild schneiden, indem Sie einige negative Ränder auf ihnen setzen.

Hier ist ein Beispiel jsFiddle demonstrieren diesen Ansatz. Sie werden sehen, dass die Bilder in den Ecken des Hauptbildes bleiben, wenn Sie die Größe des Ergebnisfensters ändern (und dadurch die Größe des Hauptbildes ändern).

HTML

<div class="right">
    <img src="..." />
    <img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
    <img src="..." />
    <img src="..." />
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
img {
    height: 90%;
    float: left;
}
div {
    float: left;
    width: 40px;
    position: relative;
    z-index: 1;
    height: 90%;
}
div.left {
    margin-left: -40px;
}
div.right {
    margin-right: -40px;
}
div > img {
    padding: 3px;
    border: 2px dashed blue;
    width: 30px;
    height: 30px;
}
div > img:last-child {
    bottom: 0px;
    right: 0px;
    position: absolute;
}

1
2018-05-30 07:36



Sie möchten Ihre Bildbreite auf 100% setzen. Benutze das.

img {
 height: 100%;
 width: 100%;
}

0
2018-05-24 05:44



Wenn Sie eine Breite und Höhe für das Div in% angeben, wird die Größe entsprechend der Seitengröße angepasst. Und die Bildgröße in% ist relativ zur div-Breite und -Höhe. Ich habe die div-Höhe bei 90% des verfügbaren Platzes und der Breite bei 50% gehalten. Das Bild ist zu 90% sowohl in der Höhe als auch in der Breite, so dass Sie die Größenänderung sowohl der Bild- als auch der Div-Abschnitte sehen können.

html, body {
height: 100%;
width: 100%;
}

 div {
height: 90%;
background-color: black;
width:50%;
}

img {
height: 90%;
width: 90%;
}

0
2018-05-24 05:46



Sie müssen Ihr CSS aktualisieren, das für den Zweck des Bildes geschrieben wurde

img {
    max-height: 100%;
    max-width:100%;
}

0
2018-05-30 13:00



Wenn ich es richtig verstanden habe, möchten Sie die Bildgröße nach Größe ändern, aber die proportionale Größe beibehalten?

Wenn ja, verwende folgendes:

img {
height: 100%;
display: inline-block;
}

Vielleicht möchten Sie display: block; auch, abhängig von Ihren Bedürfnissen.

GEIGE: http://jsfiddle.net/zhyv9/38/


0
2018-05-31 02:05



Ich habe das aktualisiert fiddle, mit dem Img-Tag selbst schließen, das einige Male Fehler verursachen kann.

und Wenn das Bild eine bestimmte Größe für Höhe und Breite hat, wird auch die Größe geändert und die entsprechende div-Höhe wird beim Vergrößern / Verkleinern um 90% erhöht / verringert

Ich hoffe, dies ist die Antwort, da ich Verpackung und Größenanpassung verstanden habe, Bitte antworten, wenn nicht funktioniert ..


0
2018-05-31 10:12



Das Hinzufügen dieses kleinen Hacks funktionierte für mich. Nach meinem Verständnis zwingt es den Browser, seinen Inhalt neu zu zeichnen / umzufllen. Geige. Ich kann nicht herausfinden, warum das nicht automatisch vom Browser gemacht wird. Getestet in Firefox, Chrome und Safari.

window.onresize = function() {
    $(".thumb").each(function() {
        this.style.display = "none";
        this.offsetWidth;
        this.style.display= "inline-block";
    })
}

0
2018-05-31 19:25