[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