wake-up-neo.com

Wie kann ich mit CSS die Größe eines Bildes 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 habe ich bisher ausgeführt (oder heruntergeladen die gesamte Site in einer Zip ).

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

Dies funktioniert auch in Safari in Ordnung, aber manchmal wird das Bild mit seiner minimalen Breite/Höhe geladen. Vielleicht liegt das an der Bildgröße, da bin ich 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.)

cssimagebrowserresizewindow
89
depi

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 height:auto. Bild max-width:100% und height:auto funktioniert in IE7, aber nicht in IE8 (ja, ein weiterer seltsamer IE Bug). Um dies zu beheben, müssen Sie width:auto\9 für IE8.

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

CSS:

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

Und 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).

169
Kurt Schindler

2018 Lösung:

Die Verwendung von Ansichtsfenstereinheiten sollte Ihnen das Leben erleichtern, da wir das Bild einer Katze haben:

cat

Jetzt wollen wir diese Katze in unserem Code unter Berücksichtigung der Seitenverhältnisse:

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 Katzengröße so ändern möchten, dass sie maximal 50% des Ansichtsfensters ausmacht?

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">

Dasselbe Bild, jetzt jedoch auf maximale Breite von 50 Vw vw (= Ansichtsfensterbreite) beschränkt, bedeutet, dass das Bild in Abhängigkeit von der angegebenen Ziffer die X-Breite des Ansichtsfensters hat. 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 Bildes auf maximal 20% des Ansichtsfensters beschränkt.

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

Im IE onresize -Ereignis wird bei jeder Pixeländerung (Breite oder Höhe) ausgelöst, sodass Leistungsprobleme auftreten können. Verzögern Sie die Größenänderung des Bilds mithilfe von javascript's window.setTimeout () um einige Millisekunden. .

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

11
Shahid

Legen Sie die Größenänderungseigenschaft auf beide fest. Dann können Sie Breite und Höhe wie folgt ändern:

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

Verwenden Sie jQuery?

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

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

BEARBEITEN:

Dies ist die CSS-Lösung, ich füge nur ein style = "width: 100%" hinzu und funktioniert bei mir zumindest in chrome und Safari. Ich habe zB nicht, also teste es einfach und lass es 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>
5
Arthur Neves

Anfangs verwendete ich das folgende HTML/CSS:

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

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

Dann habe ich class="img" zum <div> so was:

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

Und alles begann gut zu funktionieren.

3
Rin

Sie können die CSS3-Eigenschaft scale 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 :

3
ShahRokh