chevron-left chevron-right

[CSS] Responsywne obrazki z zachowaniem proporcji

W tym artykule poruszam temat związany ze skalowaniem obrazków i tła wraz ze zmianą szerokosci kontenera je zawierającego. Dzięki temu, proporcje obrazka nigdy nie będą naruszone i prezentowany obrazek będzie dobrze wyglądał.

Stałe proporcje obrazków niezależnie od szerokosci

Technika polega na ustawieniu odgórnego paddingu. Padding jest ustawiany jako procent wysokosci kontenera. Można tą technikę zastosować nie tylko do obrazków, ale również do plików video dołączanych za pomocą znacznika <video>.

Załóżmy, że mamy obrazek o wymiarach 800x450 i chcielibymy jego proporcje (16:9) niezależnie od szerokosci kontenera. Aby łatwiej wyobrazić sobie strukturę HTML tego rpzykładu zerknij do kodu poniżej:

1
2
3
<div class="span4">
 
</div>

Jak widać, nic specjalnego. Po prostu kontener, a w nim obrazek.

Dla tak przygotowanej struktury HTML stosujemy następujący kod CSS:

1
2
3
4
5
6
7
8
9
.span4 {
    width: 45%;
    margin: 0 2.5%;
}
.span4 > img {
    width: 100%;
    padding-top: 56.25%;
    display: block;
}

Klasa span4 ma 45% szerokosci głównego kontenera (nie ma znaczenia ile szerokosci ma główny kontener). Natomiast, obrazek wewnątrz wybranego elementu ma ustawiony padding odgórny o wartosci 56,25% szerokosci rodzica. Tym sposobem, proporcje obrazka się ładnie skalują. Powyższą technikę można stosować również na innych elementach.
Odnosnie obrazków, to jestem swiadom, że wystarczy zastosować height: auto, aby obrazek się automatycznie skalował.

W przypadku, gdy korzystamy z innego elementu strony niż obrazek, ale używamy tła w nim, to musimy do skalowanego elementu dodać atrybut: background-size: cover. Tym sposobem tło wewnątrz elementu się skaluje wraz ze zmianą wymiarów wybranego elementu.
Niestety, ta technika nie zadziała w Internet Explorerze 8 i niżej, dlatego w ich przypadku należy zastosować inną technikę.

Najpierw musimy być pewni, że obrazek stosowany jako tło, jest conajmniej tak szeroki jak maksymalna szerokosc elementu, do którego zostanie zastosowane tło. Jeli element będzie mniejszy, to obrazek tła zostanie przycięty.

1
2
3
4
5
6
7
8
9
10
11
12
13
.span4 {
    width: 45%;
    margin: 0 2.5%;
}
.span4 > div {
    width: 100%;
    padding-top: 56.25%;
    display: block;
    background-image: url(obrazek.jpg);
    background-size: cover;         /* IE8 i niżej nie obsłuży tego */
    -moz-background-size: cover;    /* ani tego */
    background-position: center;    /* dzięki temu wycentruje tło i ewentualnie tło zostanie przycięte */
}

Podsumowanie

Jak widać, technika jest bardzo prosta do zastosowania i efektywna. Dzięki temu, nie ważne czy mamy galerię obrazków, czy też elementy z danymi, które muszą zachować okreslone proporcje, to będziemy pewni że proporcje zostaną zachowane.

źródło

  • Super sprawa. Na pewno się przyda. Zaletą jest to, że można wszystko dopisać w CSSie i nie trzeba angażować do tego JS.

  • Przydatny wpis, ale warto przeprowadzić eksperymenty jak tragiczną interpolację obrazu oferuje Firefox 🙁
    Cover daje ostro popalić na wydajności na Androidzie 🙁
    Druga sprawa to fakt, że czasem wymagana jest wręcz typowa miniaturka ze względu na rozmiar obrazka… Wówczas można to rozwiązać w GD2 po stronie serwera czymś tego typu:
    obrazek?name=cos&width=320&height=240

  • AdamCrag

    Świetny artykuł i bardzo pomocna porada 🙂 Gratuluję i pozdrawiam!

    Adam / strona responsywna

  • jarekmroz

    Ja mam poważne wątpliwości bo mi ten kod nie działa. Poza tym , tutaj w html obrazek jest jako pojemnik ‚div’ z tłem.Nie jestem jeszcze znawcą, ale obawiam się że pojemnik z tłem jest w pełni zależny od kodu( gabaryty i tło) więc inaczej się zachowuje niż zdjęcie wzięte adresem src .Może dodatkowym problemem w przykładzie na którym pracuję jest to , że próbuję zmniejszać zdjęcia w slajderze co parę sekund wyświetlającym inne zdjęcie , ale też nie wiem dlaczego.
    Proszę o odpowiedź.

  • Ciężko mi cokolwiek powiedzieć na temat Twojego przypadku bez znajomości kodu. Kod który jest publikowany na łamach tego bloga jest weryfikowany przeze i testowany w wielu przeglądarkach. Możliwe, że czegoś brakło w Twoim kodzie lub znalazłeś przypadek w którym rzeczywiście proponowane przeze mnie rozwiązanie nie zadziała.

  • Sprawdziłem ładnie działa – wielkie dzięki za podpowiedź

  • Cieszę się 🙂