W skrócie: Aspect-ratio CSS pozwala zarezerwować miejsce na zdjęcie zanim obraz się załaduje. Dzięki temu karty usług, wpisów lub produktów mają równe proporcje, a strona mniej „skacze” podczas ładowania. Wystarczy ustawić szerokość, proporcję i object-fit.
Aspect-ratio CSS rozwiązuje częsty problem na stronach firmowych: zdjęcia w kartach mają różne wysokości, a układ skacze podczas ładowania. Widać to szczególnie w sekcjach usług, aktualności, produktach WooCommerce i galeriach z realizacjami. Zamiast kadrować każde zdjęcie ręcznie, możesz narzucić proporcję w CSS.
Problem: zdjęcia rozbijają układ kart
Zdjęcia z telefonu, sesji produktowej i banku zdjęć często mają inne proporcje, więc bez kontroli tworzą nierówne karty. Jedno zdjęcie jest panoramiczne, drugie pionowe, trzecie kwadratowe, a pod spodem przyciski zaczynają „tańczyć”.
Na stronie małej firmy wygląda to po prostu mniej profesjonalnie. Jeśli do tego obraz ładuje się wolniej, przeglądarka może najpierw narysować kartę bez zdjęcia, a potem przesunąć treść niżej.
Rozwiązanie: aspect-ratio CSS dla równych zdjęć
Najprostszy wariant to ustawienie obrazka na pełną szerokość, nadanie mu proporcji i dopasowanie kadru przez object-fit: cover. Ten kod możesz wkleić do CSS motywu, sekcji „Dodatkowy CSS” w WordPressie albo własnego pliku stylów.
.card img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}Jeśli chcesz zobaczyć minimalny przykład HTML, użyj zwykłej karty z obrazkiem, nagłówkiem i krótkim opisem. W praktyce podobny układ działa przy wpisach blogowych, usługach, realizacjach i produktach.
<article class="card">
<img src="zdjecie-uslugi.webp" alt="Pracownia stolarska podczas realizacji zamówienia">
<h2>Meble na wymiar</h2>
<p>Krótki opis usługi i najważniejsza korzyść dla klienta.</p>
</article>Jak działa ten kod
width: 100% sprawia, że zdjęcie wypełnia szerokość swojej karty. aspect-ratio: 16 / 9 rezerwuje miejsce w proporcji 16:9, zanim obraz w pełni się załaduje. object-fit: cover kadruje zdjęcie tak, aby wypełniło cały obszar bez rozciągania twarzy, produktów czy wnętrz.
display: block usuwa drobną przerwę pod obrazkiem, która potrafi pojawić się przez domyślne zachowanie elementów inline. border-radius nie jest obowiązkowy, ale często pasuje do nowoczesnych kart na stronach firmowych.
Jeśli pracujesz nad stroną, na której zdjęcia mają sprzedawać usługę lub produkt, zajrzyj też do poradnika o fotografii produktowej i biznesowej. Dobry kadr plus stabilny layout robią większą różnicę niż kolejny ozdobnik.
Wsparcie przeglądarek i Baseline
aspect-ratio jest dziś bezpiecznym wyborem dla typowych stron firmowych. Według MDN właściwość jest szeroko wspierana w aktualnych przeglądarkach od 2021 roku i ma status Baseline Widely available. Szczegóły znajdziesz w dokumentacji MDN: aspect-ratio.
W starszych projektach możesz jeszcze spotkać hack z padding-top, ale w nowych realizacjach zwykle nie ma sensu go dokładać. Prostszy kod jest łatwiejszy w utrzymaniu.
Wariant i typowy błąd
Do zdjęć produktów często lepsza będzie proporcja kwadratowa, czyli aspect-ratio: 1 / 1. Do szerokich banerów możesz użyć aspect-ratio: 21 / 9, ale uważaj: zbyt płytki kadr może ucinać głowy ludziom albo ważne detale produktu.
Typowy błąd to użycie object-fit: cover bez kontroli nad kadrem. Jeśli najważniejszy element jest z boku zdjęcia, dodaj object-position, na przykład object-position: center top. Przy większym porządku na stronie pomaga też przemyślana struktura, o której pisaliśmy w tekście o stronie firmowej budzącej zaufanie.
Równe zdjęcia poprawiają czytelność, ograniczają przesunięcia układu i pomagają użytkownikowi szybciej podjąć decyzję; jeśli nie chcesz robić tego sam, zrobimy to za Ciebie w ramach strony lub opieki nad WordPressem.