Kleiner Trick, um das Seitenverhältnis von Bildern zu ändern.
Angenommen, wir haben ein Bild mit einem Seitenverhältnis von 1:1 und wollen es auf ein Seitenverhältnis von 16:9 ändern.
Berechnen Sie die Beschnittgröße
Erst berechnen Sie, wie viel Größe Sie vom Bild beschneiden müssen:
9/16= 56.25(%) /*Bildgröße in Prozent nach dem Zuschneiden*/
100-56,25 =43,75(%) /*Zuschneideprozentwert */
44 / 2 = 21.875(%) /*jede Seite*/
Base HTML & CSS
HTML
<figure>
<img src="image-name.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}
Add Cropping Styles
Jetzt einfach negativen Rand zum Bild hinzufügen
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Zweite Methode, Höhe hinzufügen
Nun lassen Sie uns den umgekehrten Weg gehen. Nehmen wir an, wir haben ein Bild mit einem Seitenverhältnis von 16:9 und wollen es auf ein Seitenverhältnis von 1:1 ändern.
Zusätzliche Größe berechnen
- 16/9 = 1.7777 /*Fehlende Verhältnisgröße für Verhältnis 1:1*/
- 1.777 * 100 = 177.77(%) /*Größe für das Bild vor dem Zuschneiden*/
- 177.77-100 = 77.77 /*zusätzliche Größe, die beschnitten wird*/
- 77.77/2 = 38.885(%) /*zusätzliche Größe, die pro Größe beschnitten wird*/
Base HTML & CSS
HTML
<figure>
<img src="image-name2.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
}
Add Cropping Styles
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
LIVE DEMO
Das ist alles, ich hoffe es gefällt euch.
Weitere CSS-Beiträge, die ich geschrieben habe:
CSS Position Sticky – Wie es wirklich funktioniert!
Neue logische CSS-Eigenschaften!
Die neue Responsive Design Evolution
CSS-Architektur für mehrere Websites mit SASS
Die CSS-Grid-Methoden
Ein CSS-Grid-Ninja werden!
Empfehlenswerte CSS Videos, Channels und Playlists
Folgen Sie mir auf:
Mein Twitter
Mein Unternehmen
Sie können mich in meinen Facebook Gruppen finden:
CSS Masters
CSS Masters Israel