HTML <img> właściwość width

Tag HTML <img>

Definicja i użycie

width właściwości określają szerokość obrazu w pikselach.

Wskazówka:Określ height i width właściwości jest dobrym nawykiem. Jeśli ustawiasz te właściwości, możesz zastrzec przestrzeń dla obrazu podczas ładowania strony. Bez tych właściwości przeglądarka nie wie, jak duży jest obraz, więc nie może zastrzec odpowiedniej przestrzeni, co prowadzi do zmiany układu strony podczas ładowania obrazu (poniżej szczegółowo wyjaśniam ten punkt).

Wskazówka:Nie używaj height i width właściwości do skalowania obrazu. Jeśli przez height i width Jeśli chcemy zmniejszyć obraz za pomocą właściwości, użytkownik musi pobrać obraz o dużej pojemności (nawet jeśli obraz wygląda na mały na stronie). Poprawnym podejściem jest przetworzenie obrazu do odpowiednich rozmiarów za pomocą oprogramowania przed użyciem go na stronie.

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">

Spróbuj sam

Gramatyka

<img width="pixels">

Wartość atrybutu

Wartość Opis
pixels Określenie szerokości obrazu w pikselach (np. width="100").

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ć podawany rzeczywisty rozmiar obrazu, co oznacza, że te wartości mogą być większe lub mniejsze niż rzeczywisty rozmiar. Przeglądarka automatycznie dostosuje obraz, aby dopasować go do przewidzianego obszaru. 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 tego, jak duży ostatecznie będzie jego rozmiar, a jeśli nie utrzyma oryginalnych proporcji szerokości i wysokości, obraz ulegnie zniekształceniu.

Innym trikiem dla atrybutów height i width jest łatwe wypełnienie obszaru strony, a także poprawa wydajności dokumentu. Wyobraź sobie, że chcesz umieścić paskę kolorową w dokumencie. Nie musisz tworzyć obrazu o pełnym rozmiarze, po prostu utwórz obraz o szerokości i wysokości 1 piksela i przypisz mu kolor, którego 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 powyższego HTML-a, ta paska kolorowa została stworzona z obrazu o jednym pikselu:

Użycie wartości procentowych

Ostatnim trikiem dla 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 przeglądarki. Dlatego, aby utworzyć paskę kolorową 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 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 zmniejszaniu. Oznacza to, że proporcje szerokości do 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):


Spróbuj sam

Wskazówka:Celem naszych przykładów jest lepsze zrozumienie użycia atrybutów height i width. Jeśli potrzebujesz dużej powierzchni 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 używać atrybutów height i width

Czy widziałeś, że zawartość dokumentu jest wyświetlana w sposób nieregularny podczas jego ł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 wstawić obraz do wyświetlania. To również pokazuje 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 sprawdzić każdy plik obrazu i obliczyć ich przestrzeń ekranową przed wyświetleniem sąsiednich i następujących treści dokumentu. To może spowodować znaczące 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 treści dokumentu. Oba te atrybuty wymagają wartości całkowitej i są wyrażone w pikselach. Porządek występowania tych atrybutów w etykiecie <img> nie ma znaczenia.

Problem atrybutów height i width

Choć atrybuty height i width etykiety <img> mogą poprawić wydajność i pozwolić na wykonanie pewnych małych sztuczek, ich użycie wiąże się z pewnymi trudnymi negatywnymi efektami. Nawet jeśli użytkownik wyłączył funkcję automatycznego pobierania obrazów, przeglądarka nadal musi wyświetlić przestrzeń przeznaczoną na obraz 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ść treści jest bezużyteczna. Jeśli nie użyje się tych określonych rozmiarów, przeglądarka umieści tylko 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 używać 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 wszystkiego, co może poprawić wydajność sieci.

Obsługa przeglądarek

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

Tag HTML <img>