Właściwości i parametry CSS dla <img>

Właściwości i parametry CSS dla <img>

Znacznik <img> to element typu inline-block domyślnie (zachowuje się jak tekst, ale można nadać wymiary).
W CSS można go stylizować bardzo szeroko — zarówno pod względem rozmiaru, jak i pozycjonowania czy efektów wizualnych.

1. Właściwości dotyczące wymiarów i położenia

2. Ramki, cienie i kształty

3. Efekty wizualne i filtry

4. Efekty interakcji (hover)

img:hover {
transform: scale(1.05);
filter: brightness(1.1);
cursor: pointer;
}

Podsumowanie

Zadania:

Zadanie 1: Podstawowa stylizacja obrazu

Cel: Nauczyć się nadawać styl obrazowi.

Instrukcja:

1. Wstaw dowolny obraz w HTML.

2. W sekcji <style> nadaj mu:

   • szerokość 300px,

   • ramkę (border),

   • lekki cień (box-shadow).

Podpowiedź:

img {
width: 300px;
border: 2px solid #333;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

Zadanie 2: Zaokrąglone rogi

Cel: Zastosować border-radius.

Instrukcja:

1. Użyj tego samego obrazu.

2. Dodaj mu zaokrąglone rogi (border-radius: 20px;).

3. Następnie spróbuj zrobić go okrągłym (border-radius: 50%;).

Zadanie 3: Responsywny obraz

Cel: Obraz ma dopasowywać się do szerokości ekranu.

Instrukcja:

1. Ustaw w CSS:

    img {

   max-width: 100%;
height: auto;
}

2. Zmień rozmiar okna przeglądarki i obserwuj efekt.

Zadanie 4: Efekt po najechaniu (hover)

Cel: Poznać właściwości transform, filter i transition.

Instrukcja:

1. Ustaw styl dla obrazka, by miał efekt po najechaniu:

   • lekkie powiększenie (scale(1.1)),

   • rozjaśnienie (filter: brightness(1.2)),

   • płynne przejście (transition: 0.3s).

Przykład:

Zadanie 5: Przycinanie i dopasowanie (object-fit)

Cel: Nauczyć się dopasowywać obraz do określonych wymiarów.

Instrukcja:

1. Stwórz prostokątny kontener, np.:

    <div class=„kadr”>

   
<img src="krajobraz.jpg" alt="Krajobraz">
</div>

    

2. W CSS nadaj:

    .kadr {

   
width: 300px;
height: 200px;
border: 2px solid #ccc;
overflow: hidden;
}

   img {
width: 100%;
height: 100%;
object-fit: cover;
}


3. Przetestuj różne wartości: cover, contain, fill, none.

Zadanie 6: Wyrównanie obrazka w pionie

Cel: Użyć właściwości vertical-align.

Instrukcja:

1. Umieść obraz i tekst w tym samym wierszu:

    <p>

   
<img src="icon.png" alt="Ikona" width="40">
Tekst obok ikony
</p>

    

2. W CSS zastosuj różne wartości vertical-align:
   top, middle, bottom, text-top, text-bottom.

Zadanie 7: Efekt czarno-biały

Cel: Użyć filtra grayscale.

Instrukcja:

1. Wstaw kilka obrazów obok siebie.

2. Ustaw im:

    img {

   
filter: grayscale(100%);
transition: filter 0.3s;
}
img:hover {
filter: grayscale(0%);
}

    

3. Obrazy będą czarno-białe, a po najechaniu odzyskają kolor.

Zadanie 8: Obraz z przezroczystością

Cel: Zastosować opacity.

Instrukcja:

1. Wstaw dowolny obraz.

2. W CSS dodaj:

    img {

   
opacity: 0.6;
transition: opacity 0.3s;
}
img:hover {
opacity: 1;
}


Zadanie 9: Obraz jako maska (clip-path)

Cel: Wycinać obraz w określony kształt.

Instrukcja:

1. Wstaw obraz i zastosuj:

    img {

   
width: 300px;
clip-path: circle(50%);
}


2. Możesz eksperymentować z innymi kształtami:

   • ellipse(50% 30%)

   • polygon(0 0, 100% 0, 50% 100%) (trójkąt)

Zadanie 10: Animacja obrazu

Cel: Połączyć kilka właściwości CSS w animację.

Instrukcja:

1. Dodaj obraz i w CSS:

    img {

   transition: transform 0.5s ease, filter 0.5s ease;
}
img:hover {
transform: rotate(5deg) scale(1.05);
filter: brightness(1.2);
cursor: pointer;
}