Czy zdarzyło Ci się, że w siatce postów lub kafelkach na stronie obrazki mają różne wymiary, przez co całość wygląda niespójnie? Często problem wynika z tego, że użytkownicy (np. klienci) wrzucają zdjęcia w zbyt małej rozdzielczości, przez co system nie może wygenerować poprawnej miniaturki.
Zanim zaczniemy walczyć z edycją obrazów czy generowaniem wersji zastępczych, możemy spróbować prostego rozwiązania – właściwości CSS object-fit.
Jak to działa?
Zamiast kombinować z background-image, wystarczy dodać do <img> poniższe style:
img {
width: 100%;
height: 200px; /* lub inna stała wysokość */
object-fit: cover;
}Dzięki temu obrazki zostaną przycięte w taki sposób, by wypełnić cały obszar, nie tracąc przy tym proporcji – dokładnie tak, jak działa background-size: cover dla div.
Ograniczenie? Nie możemy zmieniać background-position ani ustawić repeat, ale w większości przypadków to i tak świetne rozwiązanie!
Więcej na ten temat znajdziesz tutaj: object-fit na W3Schools.
👉 Masz swoje sposoby na radzenie sobie z tym problemem? Daj znać w komentarzu!