Wie kann verhindert werden, dass Bilder bei der Größenänderung des Browsers unverhältnismäßig schrumpfen?

CSS: Bilder bei Browser-Größenänderung verkleinern

Beim Konfigurieren von Bildern über das Admin-Panel können Benutzer auf ein Problem stoßen, bei dem Bilder unverhältnismäßig verkleinert werden, wenn die Die Größe des Browserfensters wird geändert. Dieses Problem kann behoben werden, indem das Zusammenspiel zwischen CSS-Eigenschaften und Bildseitenverhältnissen verstanden wird.

Die bereitgestellten CSS-Regeln umfassen zunächst sowohl die Eigenschaften „max-width“ als auch „height“, was zu einer unerwünschten Verkleinerung führen kann, wenn die Größe des Browsers geändert wird. Um dies zu verhindern, muss man nur eine Dimension angeben (normalerweise max-width) und die andere auf automatisch setzen.

Beispiel:

.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

Dieser Ansatz behält die bei Passen Sie das Seitenverhältnis des Bildes an und lassen Sie es gleichzeitig entsprechend dem verfügbaren Platz skalieren. Wie im „richtigen“ Beispiel unten zu sehen ist, behält das Bild seine Proportionen bei und dehnt oder schrumpft nicht übermäßig.

Falsch:

max-width: 100%;
width: 100px;
height: 100px;

Richtig :

max-width: 200px;
height: auto;

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Bilder bei der Größenänderung des Browsers unverhältnismäßig schrumpfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!