Tag HTML <img>

Definicja i użycie

<img> Etykieta używana do wstawiania obrazów w stronach HTML.

Technicznie rzecz biorąc, obraz nie jest wstawiany do strony, ale jest linkowany do strony.<img> Etykieta tworzy kontener do odniesienia do obrazu.

<img> Etykieta ma dwa wymagane atrybuty:

  • src - Określ ścieżkę do obrazu
  • alt - Jeśli obraz nie może być wyświetlony z jakiegoś powodu, określ alternatywny tekst obrazu

Uwaga:Ponadto, zawsze należy określić szerokość i wysokość obrazu. Jeśli szerokość i wysokość nie są określone, strona może migotać podczas ładowania obrazu.

Wskazówka:Aby połączyć obraz z innym dokumentem, wystarczy wstawić <img> Etykieta wstawiona w <a> Wewnętrznie w etykiecie (zobacz poniższy przykład).

Zobacz również:

HTMLtutorial:Obraz w HTML

Podręcznik referencyjny HTML DOM:Obiekt Image

CSS教程:Ustawienia stylu obrazu

Przeczytaj więcej:Jak poprawnie używać obrazów

Przykład

Przykład 1

W poniższym przykładzie wstawiliśmy na stronie obraz tulipanów z Shanghajskiego Parku Kwiatów, sfotografowanych przez inżynierów CodeW3C.com:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulips" />

Spróbuj sam

Szklarnia Kwiatów Szanghaj - Tulipany

Przykład 2

Inny przykład wstawienia obrazu:

<img src="dancer.png" alt="Tancerz" width="500" height="749">

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Atrybut

Atrybut Wartość Opis
alt Tekst Określ alternatywny tekst obrazu.
crossorigin
  • anonymous
  • use-credentials
 Pozwól na użycie obrazów z innych stron, które umożliwiają dostęp przez przeglądarkę.
height Pixeli Określ wysokość obrazu.
ismap ismap Definiuj obraz jako mapę obrazu po stronie serwera.
loading
  • eager
  • lazy
 Określ, czy przeglądarka powinna natychmiast ładować obraz, czy opóźnić jego załadowanie do czasu spełnienia pewnych warunków.
longdesc URL Określ URL wskazujący na szczegółowy opis obrazu.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Określ informacje odniesienia używane podczas pobierania obrazu.
sizes Rozmiar Określ rozmiar obrazu dla różnych układów stron.
src URL Określ ścieżkę do obrazu.
srcset URL-list Określa listę plików obrazów używanych w różnych przypadkach.
usemap #mapname Definiuje obraz jako klienta jako obraz mapy strony.
width Pixeli Określa szerokość obrazu.

Globalne atrybuty

<img> Tagi obsługują Globalne atrybuty HTML。

Atrybuty wydarzeń

<img> Tagi obsługują Atrybuty wydarzeń w HTML。

Więcej przykładów

Przykład 3

Wyśrodkuj obraz (używając CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Spróbuj sam

Przykład 4

Dodaj ramkę do obrazu (używając CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Spróbuj sam

Przykład 5

Dodaj marginesy do obrazu (używając CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Spróbuj sam

Przykład 6

Dodaj marginesy do obrazu (używając CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Spróbuj sam

Przykład 7

Jak wstawić obraz z innej katalogu lub innej strony:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Drzewo" width="150" height="161">

Spróbuj sam

Przykład 8

Jak dodać link hipertekstowy do obrazu:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Spróbuj sam

Przykład 9

Jak stworzyć obraz z klikalnymi obszarami. Każdy obszar jest linkiem hipertekstowym:

<img src="life.png" alt="Życie" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Kawa" href="coffee.html">
</map>

Spróbuj sam

Dla dalszego czytania - Jak poprawnie używać obrazów

Jedną z najbardziej charakterystycznych cech HTML i XHTML jest możliwość włączenia obrazów do tekstu dokumentu, zarówno jako wewnętrzny obiekt dokumentu (obraz wewnętrzny), jak i jako oddzielny dokument dostępny do pobrania przez link hipertekstowy, lub jako tło dokumentu.

Racjonalne włączenie obrazów do treści dokumentu (statyczne lub animowane ikony, zdjęcia, wyjaśnienia, rysunki itp.) sprawi, że dokument będzie bardziej żywy i angażujący, a także wyglądać bardziej profesjonalnie, bardziej informacyjnie i łatwiejszy do przeglądania. Można również specjalnie uczynić obraz wizualnym wskaźnikiem linku hipertekstowego.

Jednakże, nadmierna liczba obrazów może uczynić dokument chaotycznym i niemożliwym do przeczytania, co dodatkowo zwiększy czas oczekiwania na pobranie i wyświetlenie strony przez użytkowników.

Proszę przeczytać poniższy artykuł, aby nauczyć się o dwóch głównych formatach obrazów w Internecie: GIF i JPEG, oraz jak poprawnie używać obrazów:

Domyślne ustawienia CSS

Większość przeglądarek będzie wyświetlała poniższe wartości domyślne <img> Element:

img {
  display: inline-block;
}

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie