Wstawianie grafiki w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 75812 razy

Wstawianie grafiki za pomocą znacznika <img src/>

Znacznik ten zawsze jest stosowany z atrybutem src, którym jest adres do grafiki, która ma być wstawiona na stronie. Możliwe jest również ustawienie następujących atrybutów tego znacznika:

Przykład wstawienia grafiki na stronie:

<img src="rysunki/Panorama.jpg" alt="panorama" style="display: block; margin: auto"/>

Wynik działania powyższego kodu:

panorama

W powyższym przykładzie obrazek został wyśrodkowany za pomocą dwóch stylów:

display:block;margin: auto

Atrybutów width i height warto używać do responsywnego dostosowania szerokości obrazka do strony. Oto przykład z wykorzystaniem zamiast wcześniej wymienionych atrybutów, atrybutu style z odpowiednimi stylami CSS:

<img src="rysunki/Panorama.jpg" alt="panorama" style="width: 100%;height: 345px"/>

Wynik działania powyższego kodu:

panorama

Przydatne style CSS

Zaokrąglenie narożników pliku graficznego

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 10px; /* ten styl jest odpowiedzialny za zaokrąglenie promieniem 10px */ }

Wynik działania powyższego zestawu styli:

panorama

Można też ustawić zaokrąglenie tak, że obrazek będzie wyglądał jak elipsa:

img{ display: block; margin: auto; width: 50%; height: 50%; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

panorama

Dodanie ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ }

Wynik działania powyższego zestawu styli:

panorama

Dodanie cienia ramki obrazka

img{ display: block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; padding: 5px; border-radius: 50%; /* ten styl jest odpowiedzialny za zaokrąglenie promieniu responsywnym 50% */ box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5); /* przesunięcie pionowe cienia [px]; przesunięcie poziome cienia [px]; promień rozmycia [px]; promień rozszerzenia cienia [px] rgba( czerwony, zielony, niebieski, przezroczystość) */ }

Wynik działania powyższego zestawu styli:

panorama

Animacja przejścia z wykorzystaniem filtru graficznego

Poniższy kod sprawi, że grafika będzie wyświetlana jako czarno-biała, a po najechaniu kursorem myszy zacznie się jedno sekundowe przejście od czarno-białego do w pełni kolorowego obrazu:

<style> img.gray { -webkit-filter: grayscale(100%); /* filtr grayscale dla Safari 6.0 - 9.0 */ filter: grayscale(100%); /* filtr grayscale dla reszty przeglądarek */ transition-property: filter; /* ustawienie, dla jakich elementów będzie wykonywana animacja przejścia */ transition-duration: 1s; /* czas animacji */ transition-timing-function: linear; /* sposób realizacji animacji - liniowy */ } img.gray:hover /* zdarzenie najechania kursora myszy na znacznik img z atrybutem class = "gray" */ { -webkit-filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray (Safari 6.0 - 9.0) */ filter: grayscale(0%); /* docelowa wartość animacji dla filtra gray */ } </style> <img class="gray" src="rysunki/Panorama.jpg" alt="panorama" style="display:block;margin: auto; width: 50%;height: 50%; border: 1px solid #aaaaaa;border-radius: 50%;padding: 5px;box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);"/>

Efekt działania powyższego kodu:

panorama

Istnieją też inne filtry graficzne:

Propozycje książek