Wie kann ich Bilder nur mit CSS in der Größe ändern und zuschneiden?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie kann ich Bilder nur mit CSS in der Größe ändern und zuschneiden?

DDD

Dec 25, 2024 pm 06:14 PM

How Can I Resize and Crop Images Using Only CSS?

Verwenden von CSS zum Ändern der Größe und Zuschneiden eines Bildes

In diesem Artikel erfahren Sie, wie Sie die Größe eines Bildes mithilfe von CSS ändern und zuschneiden können. Mit dieser Technik können Sie ein Bild mit einer bestimmten Breite und Höhe anzeigen, auch wenn das Originalbild ein anderes Seitenverhältnis hat.

Größe ändern und Zuschneiden eines Bildes

Um die Größe eines Bildes zu ändern und zuzuschneiden, Sie können eine Kombination der Eigenschaften „img“ und „background-image“ verwenden. Mit der img-Eigenschaft können Sie die Größe des Bildes ändern und dabei das Seitenverhältnis beibehalten. Mit der Eigenschaft „Hintergrundbild“ können Sie das Bild auf die gewünschte Größe zuschneiden.

Beispiel

Betrachten Sie das folgende Beispiel:

Donald Ente

Dieses Bild hat eine Größe von 800x600 Pixel. Wir möchten es als Bild mit 200 x 100 Pixeln anzeigen.

Schritt 1: Größe des Bildes ändern

<br><img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="Wie kann ich Bilder nur mit CSS in der Größe ändern und zuschneiden?" ><pre class="brush:php;toolbar:false">  style="max-width:90%">

Mit diesem Schritt wird die Größe geändert Bild auf 200 x 150 Pixel unter Beibehaltung des Seitenverhältnisses.

Schritt 2: Bild zuschneiden

<br><div><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">

pre>

In diesem Schritt wird das verkleinerte Bild auf 200 x 100 zugeschnitten Pixel.

Kombinierter Ansatz

Sie können diese beiden Techniken kombinieren, um das gewünschte Ergebnis zu erzielen. Zum Beispiel der folgende Code:

<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>
<p></p>
<p>Dieser Code ändert die Größe des Bildes auf 200 x 150 Pixel und schneidet es dann zu auf 200x100 Pixel.</p>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder nur mit CSS in der Größe ändern und zuschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

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

Verwandter Artikel

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptApr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

Einfrierzeichen der Benutzer-Agent-SaitenApr 11, 2025 am 11:20 AM

Es gab Neuigkeiten über Chrome, die ihre Benutzer-Agent-Zeichenfolge einfrieren (und alle anderen großen Browser sind an Bord). Das heißt, sie haben noch einen Benutzer-Agent (UA).

Browserversion Release -SpektrumApr 11, 2025 am 11:15 AM

Immer wenn ein Browser Versionen aktualisiert, ist es ein kleines Marketing -Event und dies zu Recht. Sieht aus wie für Firefox it es ungefähr einmal im Monat, Chrome ist ~ 6 Wochen und ist

Klebriges Inhaltsverzeichnis mit Scrollen -AktivzuständenApr 11, 2025 am 11:12 AM

Angenommen, Sie haben ein zweispaliges Layout: eine Hauptspalte mit Inhalt und eine Seitenleiste. Sagen Sie, es hat viele Inhalte mit Abschnitten, die Scrollen erfordert. Die Seitenleiste

Fügen Sie SVGs mit dem 'RECT' -Element Hintergrundfarben hinzuApr 11, 2025 am 11:11 AM

Die Vorteile der Verwendung von SVGs in der Webentwicklung sind bekannt. SVGs sind kleiner Größe, können ziemlich zugänglich gemacht werden, sind skalierbar, während sie ihre Pflege erhalten

Erstellen einer Bildergalerie mit Pixijs und WebGLApr 11, 2025 am 11:06 AM

Manchmal müssen wir ein wenig weiter als HTML, CSS und JavaScript gehen, um die von uns benötigte Benutzeroberfläche zu erstellen, und stattdessen andere Ressourcen wie SVG, WebGL, Leinwand, verwenden.

PHP ist A-OK für die VorlagenApr 11, 2025 am 11:04 AM

PHP -Vorlagen erhält oft einen schlechten Rap für die Erleichterung von unterdurchschnittlichem Code - aber das muss nicht der Fall sein. Schauen wir uns an, wie PHP -Projekte eine Basis durchsetzen können

So erstellen Sie Vue -Komponenten in einem WordPress -ThemaApr 11, 2025 am 11:03 AM

Mit der Inline-Template-Anweisung können wir reichhaltige Vue-Komponenten als fortschreitende Verbesserung gegenüber vorhandenem WordPress-Markup erstellen.

See all articles