Wie kann ich die Größe von Bildern mit CSS ohne JavaScript um einen Prozentsatz ändern?

Größe von Bildern auf einen Prozentsatz ihrer selbst in CSS ändern

Frage:

Wie können Sie Die Abmessungen eines Bildes mithilfe von CSS um einen Prozentsatz reduzieren, ohne auf JavaScript oder serverseitige Lösungen zurückgreifen zu müssen, in Szenarien, in denen die ursprüngliche Bildgröße unbekannt ist?

Antwort:

Methode 1 (Visuelle Größenänderung):

Dieser Ansatz skaliert das Bild nur visuell und behält seine ursprünglichen Abmessungen im DOM bei. Das in der Größe geänderte Bild wird jedoch im ursprünglichen Container zentriert.

<code class="css">img {
  transform: scale(0.5);
}</code>

HTML:

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

Methode 2 (prozentuale Hintergrundgröße) :

Alternativ können Sie eine prozentuale Hintergrundgröße auf ein DIV-Element anwenden, das das Bild enthält.

<code class="css">.image-container {
  width: 100%;
  height: 100%;
  background-image: url("image.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
}</code>

HTML:

<code class="html"><div class="image-container"></div></code>

Hinweis:

Während Methode 1 das gewünschte Größenänderungsergebnis für ein einzelnes Bild erzielt, kann Methode 2 verwendet werden, um die Größe mehrerer Bilder konsistent innerhalb eines Containers zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern mit CSS ohne JavaScript um einen Prozentsatz ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!