Agencja interaktywna | Strony WWW | Pozycjonowanie | Social Media

Projektujemy i budujemy strony internetowe, pozyskujemy klientów, zwiększamy sprzedaż i promujemy Twoją markę w sieci Internet.

,

Atrybuty HTML rozmiaru obrazu w dokumencie

Istnieje kilka atrybutów, które możemy wykorzystać do dostosowania rozmiaru obrazów na stronie. Poniżej znajdziesz kilka z nich wraz z przykładami:

Atrybut width – Szerokość obrazu

Atrybut width pozwala określić szerokość obrazu w pikselach. Przykład:

<img src="obraz.jpg" alt="Krajobraz" width="500">

Atrybut height – Wysokość obrazu

Atrybut height umożliwia określenie wysokości obrazu w pikselach. Przykład:

<img src="obraz.jpg" alt="Zwierzę" height="300">

Atrybut style – Stylowanie obrazu

Atrybut style pozwala na dodanie stylów CSS bezpośrednio do znacznika <img>. Możemy wykorzystać to do dostosowania zarówno szerokości, jak i wysokości obrazu:

<img src="obraz.jpg" alt="Miejsce" style="width: 400px; height: 250px;">

Atrybut sizes – Rozmiary obrazu

Atrybut sizes służy do dostosowywania rozmiarów obrazu w zależności od rozmiaru ekranu. Jest to szczególnie przydatne w responsywnym projektowaniu:

<img src="obraz.jpg" alt="Krajobraz" sizes="(max-width: 600px) 100vw, 50vw">

Atrybut scale – Skalowanie obrazu

Atrybut scale pozwala na skalowanie obrazu o określony współczynnik. Na przykład, aby zmniejszyć obraz do 80% jego oryginalnego rozmiaru:

<img src="obraz.jpg" alt="Obiekt" width="100" height="100" scale="0.8">

Atrybut srcset – Zestaw źródeł obrazu

Atrybut srcset umożliwia podanie różnych źródeł obrazu w zależności od rozmiaru ekranu. Przykład:

<img srcset="obraz.jpg 1x, obraz-2x.jpg 2x" alt="Zwierzę">

Atrybut sizes w połączeniu z srcset

Kiedy łączymy atrybut sizes z srcset, możemy jeszcze precyzyjniej kontrolować responsywność obrazu:

<img srcset="obraz.jpg 300w, obraz-2x.jpg 600w" sizes="(max-width: 600px) 100vw, 50vw" alt="Krajobraz">

Dzięki tym atrybutom możesz dostosowywać obrazy do swoich potrzeb, tworząc atrakcyjne i responsywne strony internetowe. Pamiętaj jednak, aby zachować umiar i dbać o wydajność swojej witryny, unikając nadmiernego obciążenia obrazami.

Zadzwoń