Wie kann ich die Größe eines Bildes mit CSS dynamisch ändern, wenn sich die Breite / Höhe des Browsers ändert?

Ich frage mich, wie ich die Größe eines Bildes zusammen mit dem Browserfenster ändern kann. Hier ist, was ich bisher getan habe (oder die gesamte Site in einer ZIP-Datei herunterladen ).

Dies funktioniert in Firefox einwandfrei, hat jedoch Probleme in Chrome: Die Größe des Bilds wird nicht immer geändert, es hängt irgendwie von der Größe des Fensters ab, in dem die Seite geladen wurde.

Dies funktioniert auch in Safari einwandfrei, aber manchmal wird das Bild mit seiner minimalen Breite / Höhe geladen. Vielleicht liegt das an der Bildgröße, ich bin mir nicht sicher. (Wenn es in Ordnung geladen wird, versuchen Sie mehrmals zu aktualisieren, um den Fehler zu sehen.)

Irgendwelche Ideen, wie ich das kugelsicherer machen könnte? (Wenn JavaScript benötigt wird, kann ich auch damit leben, aber CSS ist vorzuziehen.)

Dies kann mit reinem CSS erfolgen und erfordert nicht einmal Medienabfragen.

Um die Bilder flexibel zu gestalten, fügen Sie einfach max-width:100%und hinzu height:auto. Image max-width:100%und height:autofunktioniert in IE7, aber nicht in IE8 (ja, ein weiterer seltsamer IE-Fehler). Um dies zu beheben, müssen Sie width:auto\9für IE8 hinzufügen .

Quelle: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Wenn Sie eine feste maximale Breite des Bildes erzwingen möchten, platzieren Sie es einfach in einem Container, zum Beispiel:

<div style="max-width:500px;">
    <img src="..." />
</div>

JSFiddle Beispiel hier . Kein JavaScript erforderlich. Funktioniert in den neuesten Versionen von Chrome, Firefox und IE (das ist alles, was ich getestet habe).

2018 und spätere Lösung:

Die Verwendung von Einheiten in Bezug auf Ansichtsfenster sollte Ihnen das Leben erleichtern, da wir das Bild einer Katze haben:

Jetzt wollen wir diese Katze in unserem Code haben und dabei die Seitenverhältnisse berücksichtigen:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Bisher nicht wirklich interessant, aber was ist, wenn wir die Katzenbreite auf maximal 50% des Ansichtsfensters ändern möchten?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Das gleiche Bild, das jetzt jedoch auf eine maximale Breite von 50 vw vw (= Breite des Ansichtsfensters) beschränkt ist, bedeutet, dass das Bild abhängig von der bereitgestellten Ziffer die X-Breite des Ansichtsfensters aufweist. Dies funktioniert auch für die Höhe:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Dadurch wird die Höhe des Bilds auf maximal 20% des Ansichtsfensters beschränkt.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

Im IE wird das onresizeEreignis bei jeder Pixeländerung (Breite oder Höhe) ausgelöst, sodass Leistungsprobleme auftreten können. Verzögern Sie die Größenänderung von Bildern um einige Millisekunden, indem Sie das window.setTimeout () von Javascript verwenden.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Setzen Sie die Eigenschaft resize auf beide. Dann können Sie Breite und Höhe folgendermaßen ändern:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Verwenden Sie jQuery?

Da ich schnell nach den jQuery-Plugings gesucht habe und sie anscheinend ein Plugin dafür haben, überprüfen Sie dieses, sollte funktionieren:

http://plugins.jquery.com/project/jquery-afterresize

BEARBEITEN:

Dies ist die CSS-Lösung, ich füge nur einen style = "width: 100%" hinzu und funktioniert für mich zumindest in Chrome und Safari. Ich habe dh nicht, also testen Sie einfach dort und lassen Sie mich wissen, hier ist der Code:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Anfangs habe ich folgendes HTML / CSS verwendet:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Dann habe ich class="img"auf das <div> wie folgt aus :

<div class="img">
  <img src="..." />
</div>

Und alles begann gut zu funktionieren.

Sie können die CSS3- scaleEigenschaft verwenden, um die Bildgröße mit CSS zu ändern:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Weiterführende Literatur :

• CSS3 2D-Transformationen
• CSS3 Hover-Effekt-Übergänge, Transformationen, Animationen

Verwenden Sie einfach diesen Code. Was die meisten vergessen, ist die Angabe der maximalen Breite als maximale Breite des Bildes

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Überprüfen Sie diese Demonstration http://shorturl.at/nBKVY

Versuchen

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Funktioniert nur mit Anzeigeblock und Inline-Block. Dies hat keine Auswirkungen auf Flex-Elemente, da ich gerade lange versucht habe, dies herauszufinden.