Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Größe von Bildern mit CSS ohne JavaScript um einen Prozentsatz ändern?

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

DDD
Freigeben: 2024-10-30 21:45:02
Original
220 Leute haben es durchsucht

How to Resize Images by a Percentage Using CSS Without JavaScript?

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>
Nach dem Login kopieren

HTML:

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

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>
Nach dem Login kopieren

HTML:

<code class="html"><div class="image-container"></div></code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage