Je kunt afbeeldingen bijsnijden met een paar regels CSS, zonder Photoshop of andere beeldbewerkingsprogramma’s. Dat is handig wanneer de miniaturen in een lay-out met meerdere kolommen verschillende hoogtes hebben, zoals hieronder.
VOOR
De ongelijke hoogtes van de miniaturen kunnen de hele lay-out gemakkelijk verstoren.
CSS
Kopieer de code hieronder en plak die in je CSS-bestand.
img {
height: 200px;
object-fit: cover;
}
Probeer object-position: 10% 10%; als je de positie van de afbeelding binnen het vlak wilt verschuiven.
NA
Al je 20 tot 30 miniaturen passen perfect en je lay-out ziet er niet meer rommelig uit. Je kunt deze methode op elke afzonderlijke afbeelding op je webpagina toepassen.