Wstawianie grafiki w HTML-u
Stronę tą wyświetlono już: 57533 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:
- alt - tekst alternatywny, który zostanie wyświetlony jeżeli obraz będzie niedostępny. Zaleca się korzystanie z tego znacznika, jako opisu grafiki na stronie dla przeglądarek internetowych, które lubują się w ich czytaniu;
- width - określa szerokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
- height - określa wysokość obrazka (nie zalecane jest jego używanie, lepiej jest wstawiać grafikę o żądanych wymiarach na stronie);
Przykład wstawienia grafiki na stronie:
- <img src="rysunki/Panorama.jpg" alt="panorama" style="display: block; margin: auto"/>
Wynik działania powyższego kodu:

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:

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:

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:

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:

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:

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:

Istnieją też inne filtry graficzne:
filtr rozmycia blur:
Listing 9 - img
- {
- -webkit-filter: blur(10px); /* Safari 6.0 - 9.0 */
- filter: blur(10px);
- }
Efekt:
filtr rozjaśnienia brightness:
Listing 10 - img
- {
- -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
- filter: brightness(200%);
- }
Efekt:
filtr kontrastu contrast:
Listing 11 - img
- {
- -webkit-filter: contrast(200%); /* Safari 6.0 - 9.0 */
- filter: contrast(200%);
- }
Efekt:
filtr obrotu odcieni kolorów hue-rotate:
Listing 12 - img
- {
- -webkit-filter: hue-rotate(180deg); /* Safari 6.0 - 9.0 */
- filter: hue-rotate(180deg);
- }
Efekt:
filtr odwrócenia kolorów invert:
Listing 13 - img
- {
- -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
- filter: invert(100%);
- }
Efekt:
filtr przezroczystości opacity:
Listing 14 - img
- {
- -webkit-filter: opacity(50%); /* Safari 6.0 - 9.0 */
- filter: opacity(50%);
- }
Efekt:
filtr saturacji saturate:
Listing 15 - img
- {
- -webkit-filter: saturate(50%); /* Safari 6.0 - 9.0 */
- filter: saturate(50%);
- }
Efekt:
filtr sepii sepia:
Listing 16 - img
- {
- -webkit-filter: sepia(100%); /* Safari 6.0 - 9.0 */
- filter: sepia(100%);
- }
Efekt: