Atrybut height w HTML <img>
Definicja i użycie
wysokość
Atrybut określa wysokość obrazu w pikselach.
Wskazówka:Zawsze określaj dla obrazu wysokość
i Atrybut szerokośćJeśli ustawiono wysokość i szerokość, przeglądarka założy odpowiednią przestrzeń dla obrazu podczas ładowania strony. W przeciwnym razie, jeśli brakuje tych atrybutów, przeglądarka nie wie, jak duży jest obraz, i nie może założyć odpowiedniej przestrzeni. To spowoduje, że układ strony zmieni się podczas ładowania (gdy obraz jest ładowany).
Wskazówka:używając wysokość
i szerokość
Zmniejszanie rozmiaru dużych obrazów wymusza pobranie dużego obrazu (nawet jeśli na stronie wygląda na mały). Aby uniknąć tego, przed użyciem obrazu na stronie, użyj oprogramowania do przetwarzania obrazów, aby dostosować jego rozmiar.
Przeczytaj więcej:Szczegółowe wyjaśnienie atrybutów height i width
Przykład
Obraz o szerokości 500 pikseli i wysokości 600 pikseli:
<img src="img_girl.jpg" alt="Dziewczyna w kurtce" width="500" height="600">
Gramatyka
<img height="pixels">
Wartość atrybutu
Wartość | Opis |
---|---|
pixels | Określ wysokość obrazu w pikselach (np. height="100"). |
Więcej przykładów
Zmiana rozmiaru obrazu - Tworzenie wypełniających obrazów
Atrybuty height i width mają ukrytą cechę, że nie trzeba podawać rzeczywistych wymiarów obrazu, co oznacza, że te wartości mogą być większe lub mniejsze niż rzeczywiste wymiary. Przeglądarka automatycznie dostosuje obraz, aby pasował do przydzielonego miejsca. Dzięki temu można łatwo tworzyć miniatury dużych obrazów oraz powiększać bardzo małe obrazy. Jednak należy pamiętać: przeglądarka musi pobrać cały plik, niezależnie od ostatecznego rozmiaru, który zostanie wyświetlony, a jeśli nie utrzyma pierwotnych proporcji szerokości i wysokości, obraz ulegnie zniekształceniu.
Innym trikiem z użyciem atrybutów height i width jest bardzo łatwe wypełnienie obszaru strony, jednocześnie poprawiając wydajność dokumentu. Wyobraź sobie, że chcesz umieścić kolorowy pasek w dokumencie. Nie musisz tworzyć obrazu o pełnych wymiarach, wystarczy utworzyć obraz o szerokości i wysokości 1 piksela i przypisać mu kolor, który chcesz użyć. Następnie użyj atrybutów height i width, aby rozszerzyć go do większych wymiarów.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
To jest efekt tego HTML-a, kolorowy pasek jest wykonany z obrazu o jednym pikselu:

Użycie wartości procentowych
Ostatnim trikiem z użyciem atrybutu width jest użycie wartości procentowych zamiast wartości absolutnych w postaci pikseli. To spowoduje, że przeglądarka skaluje obraz w stosunku do wymiarów okna przeglądarki. Dlatego, aby utworzyć paskowy kolorowy pasek o szerokości równej szerokości okna przeglądarki i wysokości 30 pikseli, można to zrobić w następujący sposób:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Kiedy rozmiar okna dokumentu zmienia się, rozmiar tego obrazu również się zmienia:

Wskazówka:Jeśli podano wartość szerokości w formie procentu i pominięto wysokość, przeglądarka utrzyma proporcje szerokości i wysokości obrazu zarówno przy powiększaniu, jak i zmniejszaniu. Oznacza to, że proporcje szerokości i wysokości obrazu nie ulegną zmianie, a obraz nie ulegnie zniekształceniu.
Proszę spojrzeć na poniższy HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Oznacza to, że jeśli ustawisz jedynie wartość procentową atrybutu width obrazu ct_1px.gif, uzyskasz prostokątny obraz (ponieważ oryginalny ct_1px.gif to prostokąt o szerokości i wysokości 1px):

Wskazówka:Dostarczamy powyższych przykładów, aby lepiej zrozumieć użycie atrybutów height i width. Jeśli potrzebujesz dużego obszaru jednolitego koloru do dekoracji strony, lepszym sposobem jestUżycie CSS do tworzenia koloru tła.
Szczegółowe wyjaśnienie atrybutów height i width
Dlaczego warto używać atrybutów height i width
Czy widziałeś, że zawartość dokumentu wyświetla się w nieregularny sposób podczas ładowania? Powodem tego jest to, że przeglądarka musi stale dostosowywać układ strony, aby wyświetlić każdy załadowany obraz. Przeglądarka pobiera i analizuje szerokość i wysokość obrazu, aby zdecydować o jego rozmiarze, a następnie rezerwuje odpowiednią przestrzeń w oknie wyświetlania. Następnie przeglądarka dostosowuje układ strony, aby umieścić obraz w wyświetlaniu. To również mówi nam, że obrazy są niezależnymi plikami, które są ładowane osobno.
Ale to nie jest najbardziej efektywny sposób wyświetlania dokumentu, ponieważ przeglądarka musi sprawdzić każdy plik obrazu i obliczyć ich przestrzeń ekranową przed wyświetleniem相邻nych oraz następnych treści dokumentu. To może spowodować znaczne opóźnienie w wyświetlaniu dokumentu, co może przerwać czytanie użytkownika.
Dla twórców bardziej efektywnym sposobem jest użycie atrybutów height i width etykiety <img> do określenia rozmiaru obrazu. W ten sposób przeglądarka rezerwuje przestrzeń dla obrazu przed jego pobraniem, co przyspiesza wyświetlanie dokumentu i zapobiega przesuwaniu się treści dokumentu. Oba atrybuty muszą być wartościami całkowitymi i wyrażonymi w pikselach. Kolejność występowania tych atrybutów w etykiecie <img> nie ma znaczenia.
Problem atrybutów height i width
Chociaż atrybuty height i width etykiety <img> mogą poprawić wydajność i pozwolić na pewne małe sztuczki, ale ich użycie ma również pewne trudne negatywne efekty. Nawet jeśli użytkownik wyłączył funkcję automatycznego pobierania obrazów, przeglądarka nadal musi wyświetlić przestrzeń przeznaczoną dla obrazów w określonych rozmiarach. Zwykle pozostawia to czytelnikowi pustą ramkę, w której znajduje się bezsensowny ikona, wskazująca na miejsce umieszczenia obrazu. W takim przypadku strona wygląda bardzo źle, jakby nie była ukończona, a większość treści jest bezużyteczna. Jeśli nie używa się tych określonych rozmiarów, przeglądarka umieści jedynie ikonę obrazu w tekście, co przynajmniej pozwala na czytanie niektórych tekstów.
Dla tego problemu nie mamy jeszcze rozwiązania, możemy jedynie podkreślić, że warto jest korzystać z Atrybut alt iTekst opisowyTak, aby czytelnik przynajmniej wiedział, czego brakuje tutaj. Wciąż zalecamy użycie tych właściwości rozmiaru, ponieważ zachęcamy do wszelkich działań poprawiających wydajność sieci.
Obsługa przeglądarek
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Wsparcie | Wsparcie | Wsparcie | Wsparcie | Wsparcie |