Aby zmienić rozmiar zdjęcia w HTML, można zastosować kilka metod, które różnią się elastycznością, łatwością użycia oraz wpływem na wygląd i responsywność strony. Poniżej znajdziesz szczegółowy poradnik obejmujący najważniejsze techniki wraz z przykładami kodu i praktycznymi wskazówkami.
Zmiana rozmiaru zdjęcia za pomocą atrybutów HTML (width, height)
Najprostszym sposobem na zmianę rozmiaru zdjęcia w HTML jest użycie atrybutów width i height wewnątrz tagu <img>. Pozwala to szybko określić szerokość i/lub wysokość obrazka w pikselach lub w procentach.
<img src="przyklad.jpg" width="300" height="200" alt="Opis zdjęcia"> - width – ustawia szerokość obrazka;
- height – ustawia wysokość obrazka.
Wskazówki
- Podając tylko jeden z parametrów (
widthalboheight), przeglądarka automatycznie zachowa proporcje zdjęcia, - atrybuty te są proste w użyciu, ale mniej elastyczne przy projektowaniu responsywnych stron.
Zmiana rozmiaru zdjęcia za pomocą CSS
CSS daje większą kontrolę nad wyświetlaniem zdjęć, umożliwiając np. skalowanie procentowe, ustawianie maksymalnych rozmiarów czy dopasowanie do różnych urządzeń.
Szerokość w procentach – obraz responsywny
<img src="przyklad.jpg" class="responsive-img" alt="Opis zdjęcia"> .responsive-img { width: 100%; height: auto; } - width: 100%; – zdjęcie zajmuje całą szerokość swojego kontenera;
- height: auto; – zachowane proporcje oryginału.
Ustawienie stałych rozmiarów przez CSS
.img-fixed { width: 200px; height: 150px; } <img src="przyklad.jpg" class="img-fixed" alt="Opis zdjęcia"> Responsywne obrazy – srcset i atrybuty rozdzielczości
Aby dopasować rozmiar i jakość zdjęcia w zależności od rodzaju i rozdzielczości ekranu, rekomenduje się korzystanie z atrybutu srcset –
<img src="przyklad-800.jpg" srcset=" przyklad-400.jpg 400w, przyklad-800.jpg 800w, przyklad-1200.jpg 1200w " sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" alt="Opis zdjęcia"> - Przeglądarka pobierze odpowiednią wersję zdjęcia w zależności od wielkości ekranu.
Ustawianie maksymalnej szerokości i wysokości (przydatne w responsywnym designie)
img { max-width: 100%; height: auto; } - Obraz nie będzie większy niż rozmiar kontenera, zachowując swoje proporcje.
Wskazówki i dobre praktyki
- Zachowuj proporcje – zawsze ustawiaj
height: autolub pozostaw jeden wymiar pusty, aby uniknąć zniekształceń; - Optymalizuj pliki przed umieszczeniem na stronie – zbyt duże zdjęcia spowalniają ładowanie strony i negatywnie wpływają na SEO;
- Stosuj techniki responsywne (np.
srcsetisizes), aby zdjęcia były zawsze dopasowane do urządzenia użytkownika; - Testuj na różnych ekranach – koniecznie sprawdź, jak zdjęcia prezentują się na smartfonie, tablecie i dużym monitorze;
- Rozważ nowoczesne formaty obrazów (np. WebP), które pozwalają na lepszą kompresję bez utraty jakości.
Przykład praktyczny – elastyczne, responsywne zdjęcie z minimalnym kodem
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Zmiana rozmiaru zdjęcia w HTML i CSS</title> <style> .container { max-width: 600px; margin: 0 auto; } img { width: 100%; height: auto; display: block; } </style> </head> <body> <div class="container"> <img src="przyklad.jpg" alt="Przykładowe zdjęcie"> </div> </body> </html> W powyższym przykładzie zdjęcie będzie zawsze dopasowywać się do szerokości kontenera, jednocześnie zachowując swoje proporcje oraz nie przekraczając ustalonego maksimum.
Dzięki tym metodom masz pełną kontrolę nad rozmiarem zdjęć na stronie oraz możesz zapewnić ich właściwe wyświetlanie na każdym urządzeniu. Wybierz rozwiązanie, które najlepiej odpowiada Twoim potrzebom projektowym!
