Element obrazu HTML

W tworzeniu stron internetowych można zastosować różne techniki, aby strona internetowa była ogólna reakcja. Mówiąc dokładniej, dodawane są zdjęcia w celu zwiększenia wyglądu strony internetowej. Jednak dodanie dużych lub małych obrazów może również spowodować pewne problemy z widocznością na różnych urządzeniach, a czasem format obrazu nie jest obsługiwany. Aby przezwyciężyć te problemy, możesz użyć znacznika HTML.

Ten zapis poprowadzi Cię o wykorzystaniu elementu HTML.

Co to jest element HTML?

Dla twórców stron internetowych HTML „”Element zapewnia elastyczność w określaniu zasobów obrazu. Pozwala na wprowadzenie jednego lub więcej elementów i jednego elementu w ostatnim. Przeglądarka ładuje każdy obraz z i wyświetla najbardziej odpowiedni obraz, a jeśli nie znajdzie żadnych dopasowań, obraz określony w znaczniku zostanie wyświetlony.

Jak używać elementu HTML?

Aby użyć znacznika HTML, postępuj zgodnie z podaną składnią:

Opis powyższej składni znajduje się poniżej:

• "”To startowy tag i„”To końcowy tag.
• "„Element zawiera wersje obrazu. Wersje te są zgodnie z urządzeniami wyświetlanymi. Ponadto w elementach obrazu może istnieć wiele tagów.
• "„Tag służy do dostarczenia źródła”src”Obrazu, rozmiaru i innych atrybutów.

Sprawdźmy podany przykład.

Przykład: Jak używać zdjęć o różnych wymiarach w HTML?

Ten przykład pokaże, w jaki sposób przeglądarka ładuje każde zdjęcie z elementu źródłowego i wyświetla ten, który jest bardziej odpowiedni według rozmiaru ekranu. Aby to zrobić, użyj trzech zdjęć o różnych wymiarach.

Oto lista obrazów o różnych wymiarach umieszczonych w folderze projektu:

Teraz zobaczmy, jak te obrazy będą wyświetlane z różnymi rozmiarami ekranu.

W HTML najpierw dodaj

Tag do nagłówka. Następnie w „„Element Tag, dodaj wiele znaczników ze ścieżką obrazów:

Tag obrazu HTML

Opis znacznika wymienionego w sekcji kodu powyżej wyprzedanego jest wspomniany poniżej:

• "”Jest początkowym znacznikiem elementu obrazu.
• "”Tag służy do dostarczania wielu obrazów źródłowych.
• "głoska bezdźwięczna”Atrybut określa typ urządzenia nośnika, do którego łączy element HTML.
• "srcset„Atrybut służy do dostarczenia adresów URL różnych obrazów, które należy wyświetlić.
• "”Tag, w końcu jest używany jako dziecko, które zapewnia alternatywny obraz. Oznacza to, że jeśli którykolwiek z obrazów z znacznika źródłowego nie może załadować, wówczas określony obraz jest wykorzystywany jako alternatywa.
• "src”Atrybut oznacza ścieżkę obrazu alternatywnego.
• "Alt”Atrybut służy do dodawania alternatywnego tekstu do wyświetlenia w przypadku, gdy obraz nie jest załadowany.
• "szerokość„Atrybut jest wykorzystywany do określenia szerokości obrazu w pikselach.
• "”To znacznik zamykający.

Notatka: Atrybut multimediów określa typy urządzeń multimedialnych, dla których element jest połączony.

Poniższe dane wyjście wyraźnie pokazuje, że obrazy są responsywne zgodnie z rozmiarem ekranu naszego urządzenia. Na początku „„IMG1”Z wyświetlaniem wymiaru 3047 x 1246, a gdy ekran jest przeciągany powyżej 500px, to„IMG3”Jest wyświetlany. Wreszcie, gdy wymiar przekracza 1000px, „IMG2" pojawia się:

W ten sposób możesz użyć tagu, aby zdjęcia reagowały zgodnie z naszym rozmiarem ekranu.

Wniosek

Obrazy odgrywają istotną rolę w uczynieniu witryny atrakcyjnej. Ponadto, aby witryna była bardziej responsywna, można użyć elementu HTML. Ten tag obejmuje tag i tag wykorzystany do dostarczania wielu zasobów multimedialnych dla elementów multimedialnych, takich jak, i tagi. W tym artykule pokazano zastosowanie elementu HTML i sposób, w jaki obrazy można reaktywnie reagować zgodnie z rozmiarem ekranu.