Képek négyzetes megjelenítése CSS-el
Előforsult, hogy egy weboldalhoz kapott anyagban sok kép volt, amik különféle oldalaránnyal rendelkeztek. Ezekkel lehet játszani, hogy szépen, begízítva egységesre vágja az ember, de ha az adott téma ezt nem követeli meg feltétlen, van egy gyorsabb és egyszerűbb megoldás, amihez elég néhány sor az oldal sablonba.
.square {
position: relative;
}
.square::after {
content: "";
display: block;
padding-bottom: 100%;
}
.square img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}