CSS tips #1 – obrazki

Po dłuższej przerwie związanej z nadmiarem pracy i nowym rokiem akademickim wracam z nowym cyklem krótkich, ale praktycznych wpisów odnośnie CSS. Na dobry początek zajmijmy się obrazkami.

Kodując listę artykułów (albo inną listę z miniaturami) spotykamy się z rożnymi rozmiarami zdjęć (dodatkowo zazwyczaj o różnych proporcjach). No i tu pojawia się problem – jak estetycznie wkomponować zdjęcia w listę? Osobiście używam zamiennie dwóch metod.

Metoda 1 – gdy wysokość może być zmienna

Jest to chyba najbardziej banalny (ale skuteczny ;)) sposób. Możemy nadać obrazkowi stałą szerokość, a wysokość zostanie tak dobrana, by zachować proporcje:

img{
    width:200px;
}

Sposób ten wykorzystuję, gdy obrazek nie musi mieć stałej wysokości.

Metoda 2 – gdy przestrzeń na obrazek jest ograniczona

Druga metoda jest nieco bardziej „zaawansowana”. Obrazek możemy umieścić w kontenerze o stałych rozmiarach.

Kod HTML:

<div class=”image”>
    <img src=”...” alt=”” />
</div>

Kod CSS:

.image{
    width:200px;
    height:100px;
    overflow:hidden;
}

Dzięki umieszczeniu obrazka wewnątrz kontenera o stałych rozmiarach i właściwości overflow:hidden będzie on „przycinany” do wskazanych rozmiarów. Może nie jest to idealny sposób, ale skuteczny, gdy projekt graficzny wymaga miniatur o stałych wymiarach.

Jest jeszcze trzeci sposób – określenie stałej szerokości i wysokości obrazka, ale ze względu na brak zachowania proporcji niepraktyczny.

PS: Niebawem (jeśli czas pozwoli) pojawi się wpis podsumowujący cykl o wzorcach projektowych.