CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel gesehen, in dem es darum ging, dass CSS das Problem der Bildverzerrung im Front-End perfekt löst. Deshalb habe ich ihn aufgezeichnet und weitergegeben:

1. Passen Sie die Breite bzw. Höhe des Bildes an die Breite bzw. Höhe des Containers an, schneiden Sie den Überschuss ab und zentrieren Sie das Bild:

<style type="text/css">
div{
    Breite: 200px;
    Höhe: 200px;
    Überlauf: versteckt;
    Rand: 2px durchgehend rot;
    Position: relativ;
}
img{
    Breite: 100 %;
    Position: absolut;
 oben: 50 %;
 links: 50%;
 transformieren: übersetzen(-50 %, -50 %); 
}
</Stil>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

Effektbild:

Wenn die Breite des Bildes begrenzt ist und die Höhe größer oder gleich der Höhe des Containers ist, wird der gesamte Container ausgefüllt. Wenn die Bildhöhe jedoch kleiner als die Containerhöhe ist, entsteht ein leerer Bereich. Dasselbe gilt für eine feste Höhe. Diese Methode ist die einfachste und praktischste und wird noch perfekter, wenn sie mit dem Hintergrundschneiden kombiniert wird.

2. Achten Sie darauf, dass das Bild immer im Container und zentriert angezeigt wird. Bei dieser Methode wird das Bild nicht beschnitten, und man kann sie als eine verbesserte Version der obigen Methode bezeichnen.

<style type="text/css">
div{
    Breite: 200px;
    Höhe: 200px;
    Rand: 2px durchgehend rot;
    Position: relativ;
}
img{
    maximale Breite: 100 %;
    maximale Höhe: 100 %;
    Position: absolut;
 oben: 50 %;
 links: 50%;
 transformieren: übersetzen(-50 %, -50 %); 
}
</Stil>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

Das Wirkungsdiagramm sieht wie folgt aus:

Es ist ersichtlich, dass unabhängig davon, ob die Breite den Container überschreitet, die Höhe den Container überschreitet oder Breite und Höhe den Container nicht überschreiten, sie alle in der Mitte des Containers angezeigt werden können, ohne abgeschnitten zu werden.

3. Machen Sie das Bild zum Hintergrund. Durch Ändern der Hintergrundgröße können Sie den Effekt des im Container angezeigten Bildes beliebig ändern. Die Bedienung ist am bequemsten:

<style type="text/css">
div{
    Breite: 200px;
    Höhe: 200px;
    Rand: 2px durchgehend rot;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: Mitte;
    Hintergrundgröße: Abdeckung;
}
</Stil>
<div style="Hintergrundbild: url(1.jpg);"></div>

Das Wirkungsdiagramm sieht wie folgt aus:

Durch Ändern der Hintergrundgröße im obigen Bild können wir sehen, dass sowohl Methode 1 als auch Methode 2 problemlos implementiert werden können. Darüber hinaus ist der letzte Deckeleffekt der idealste, das heißt, er wird in der Mitte angezeigt, füllt den gesamten Behälter aus und verformt sich nicht. Wenn Sie SEO nicht berücksichtigen, ist diese Methode dennoch sehr einfach anzuwenden. Wenn es sich bei Ihnen jedoch um eine Informationsseite, Fotoausstellung usw. handelt, sollten Sie diese Methode nicht verwenden, da Ihre Bilder sonst nur schwer in die Suchmaschine aufgenommen werden.

4. Es wäre großartig, wenn es eine Methode gäbe, mit der die Wirkung der dritten Methode unter Berücksichtigung von SEO erzielt werden kann. Hier möchten wir vorstellen: Objekt-Fit und Objekt-Position. Sie können es so verstehen: Die Objektposition entspricht der Hintergrundposition und ihr Standardwert beträgt 50 % 50 %, was zentriert ist. Daher wird es im Allgemeinen nicht geschrieben. Sobald Objektanpassung hinzugefügt wird, ist es standardmäßig zentriert. Object-fit entspricht background-size, also der Methode zum Füllen des Bildes (hier nicht der Bildgröße).

<style type="text/css">
div{
    Breite: 200px;
    Höhe: 200px;
    Rand: 2px durchgehend rot;
}
img{
    Breite: 100 %;
    Höhe: 100%;
    Objekt-Passung: Abdeckung;
}
</Stil>
<div>
    <img src="1.jpg">
</div>

Das Wirkungsdiagramm sieht wie folgt aus:

Aus dem obigen Bild können wir ersehen, dass das Ergebnis fast genau dem durch die Hintergrundmethode erzielten Effekt entspricht. Man kann sagen, dass dies eine Nachbildung der Hintergrundmethode ist und dadurch auch der Nachteil vermieden werden kann, dass das Hintergrundbild nicht in die Suchmaschine aufgenommen wird. Wenn Sie die IE-Kompatibilität nicht berücksichtigen, warum verwenden Sie dann nicht diese Methode? Mama muss sich keine Sorgen mehr darüber machen, dass Redakteure zufällige Bilder hochladen!

Hinweis: Für das Bild müssen Breite und Höhe festgelegt werden, sonst ist die Objektanpassung ungültig. Stellen Sie das Bild einfach auf die gleiche Breite und Höhe wie den Container ein. Der Container muss nicht auf Überlauf und Ausblenden eingestellt werden, Object-Fit blendet automatisch die Teile aus, die die Breite und Höhe des Bildes überschreiten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.