Atrybuty height i width tagu <img> w HTML
Przykład
Ustawiamy szerokość i wysokość obrazu na 200 pikseli:
<img src="/i/mouse.jpg" height="200" width="200" />
Definicja i użycie
Atrybuty height i width tagu <img> ustawiają rozmiar obrazu.
Wskazówka:Podawanie atrybutów height i width dla obrazu jest dobrym nawykiem. Jeśli ustawisz te atrybuty, można zastrzec przestrzeń dla obrazu w momencie ładowania strony. Bez tych atrybutów przeglądarka nie wie, jakiego rozmiaru ma mieć obraz, a więc nie może zastrzec odpowiedniej przestrzeni, co prowadzi do zmiany układu strony podczas ładowania obrazu. (Poniżej szczegółowo wyjaśniamy ten punkt).
Wskazówka:Nie skaluj obrazów za pomocą atrybutów height i width. Jeśli skalujesz obraz za pomocą tych atrybutów, użytkownik musi pobrać obraz o dużej pojemności (nawet jeśli obraz na stronie wygląda bardzo mały). Poprawne podejście to przetworzenie obrazu do odpowiednich rozmiarów za pomocą oprogramowania przed umieszczeniem go na stronie.
Rozszerzone czytanie:Szczegółowe wyjaśnienie atrybutów height i width
Więcej przykładów
Zmiana rozmiaru obrazu - Tworzenie wypełniających obrazów
Atrybuty height i width mają ukrytą cechę, że nie musi być podana rzeczywista wielkość obrazu, co oznacza, że te wartości mogą być większe lub mniejsze niż rzeczywiste wymiary. Przeglądarka automatycznie dostosuje obraz, aby pasował do przewidzianego obszaru. Dzięki temu można łatwo tworzyć miniatury dużych obrazów oraz powiększać bardzo małe obrazy. Ale należy pamiętać: przeglądarka musi pobrać cały plik, niezależnie od ostatecznego rozmiaru, który będzie wyświetlany, a jeśli nie utrzyma oryginalnych proporcji szerokości i wysokości, obraz ulegnie zniekształceniu.
Innym trikiem użycia atrybutów height i width jest łatwe wypełnienie obszaru strony, a także poprawa wydajności dokumentu. Wyobraź sobie, że chcesz umieścić kolorowy paskowy 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" />
Oto efekt powyższego HTML-a, ta kolorowa paskowa jest wykonana z obrazu o jednym pikselu:
Użycie wartości procentowych
Ostatnią sztuczką 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 pewnej proporcji okna wyświetlającego. Dlatego, aby utworzyć paskowy kolorowy pasek o szerokości równej szerokości okna wyświetlającego 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 zmienia się rozmiar okna dokumentu, 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 przy zmniejszaniu. Oznacza to, że proporcja między wysokością a szerokością obrazu nie ulegnie zmianie, a obraz nie ulegnie zniekształceniu.
Spójrz na poniższy HTML:
<img src="/i/ct_1px.gif" width="20%" />
To oznacza, że jeśli ustawisz 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:Możesz to zrobić w naszym narzędzi do testów onlineSpróbuj sam!
Wskazówka:Celem podania powyższego przykładu jest lepsze zrozumienie użycia atrybutów height i width. Jeśli potrzebujesz dużego, jednolitego bloku koloru do dekoracji strony, lepszym sposobem jestSugerujemy użycie CSS do tworzenia kolorów tła.
Wsparcie przeglądarki
Wszystkie przeglądarki wspierają atrybuty height i width.
Gramatyka
<img height="value" />
lub:
<img width="value" />
Wartość atrybutu
| Wartość | Opis |
|---|---|
| pixels | Wysokość lub szerokość wyrażona w pikselach. |
| percent | Wysokość lub szerokość wyrażona jako procent zawartości elementu. |
Próbka TIY
- Dostosowanie rozmiaru obrazu
- Ten przykład pokazuje, jak dostosować rozmiar obrazu do różnych wymiarów.
Szczegółowe wyjaśnienie atrybutów height i width
Dlaczego warto używać atrybutów height i width
Czy widziałeś, że zawartość dokumentu jest wyświetlana w sposób nieregularny podczas ładowania? Dzieje się tak, ponieważ przeglądarka musi stale dostosowywać układ strony, aby wyświetlić każde załadowane obrazu. 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 wstawić obraz do wyświetlania. To również mówi nam, że obrazy są niezależnymi plikami, które są ładowane osobno.
Jednakże, to nie jest najbardziej efektywny sposób wyświetlania dokumentu, ponieważ przeglądarka musi sprawdzać każdy plik obrazu i obliczać ich przestrzeń ekranową przed wyświetleniem sąsiednich i następnych części dokumentu. To może spowodować znaczną 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 miejsce dla obrazu przed jego pobraniem, co przyspiesza wyświetlanie dokumentu i zapobiega ruchowi zawartości dokumentu. Oba atrybuty wymagają wartości całkowitych i są wyrażone 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 tagu <img> mogą poprawić wydajność i umożliwić realizację pewnych małych sztuczek, 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 wyświetli przestrzeń przeznaczoną dla obrazu w określonych rozmiarach. Zwykle zostawia to czytelnikowi pustą ramkę, w której znajduje się bezsensowny ikona, oznaczająca miejsce umieszczenia obrazu. W takim przypadku strona wygląda bardzo źle, jakby nie była ukończona, a większość zawartości jest bezużyteczna. Jeśli nie użyjesz tych określonych wymiarów, przeglądarka umieści tylko ikonę obrazu w tekście, co przynajmniej pozwoli na przeczytanie niektórych tekstów.
Dla tego problemu nie mamy jeszcze rozwiązania, możemy jedynie podkreślić, że warto Atrybut alti zTekst opisowyTak, aby czytelnik przynajmniej wiedział, czego brakuje tutaj. Wciąż zalecamy używanie tych wymiarów, ponieważ zachęcamy do wszystkiego, co może poprawić wydajność sieci.
