HTML IMG Skalowanie

Gdy obraz jest dodawany do dokumentu HTML, należy go odpowiednio dostosować, aby utrzymać lepszą wizualną reprezentację interfejsu. Mówiąc dokładniej, html „img„Skalowanie oznacza dostosowanie obrazu w odniesieniu do różnych parametrów, takich jak„wysokość" I "szerokość„Aby zmienić rozmiar obrazu. Bez rozmiaru lub skalowania oryginalny rozmiar obrazu zostanie wyświetlony jako jego domyślny rozmiar w wyjściu. Aby skalować obrazy HTML, właściwości CSS „wysokość” i „szerokość” są używane na różne sposoby.

Ten post obejmie następujące podejścia:

• Metoda 1: Skalowanie obrazu przy użyciu wartości procentowych
• Metoda 2: Skalowanie obrazu za pomocą wartości pikseli

Metoda 1: Skalowanie obrazu przy użyciu wartości procentowych

Deweloperzy mogą zastosować CSS ”wysokość" I "szerokość„Właściwości na HTML””Element i zdefiniuj dowolną liczbę wartości procentowych w elemencie stylu CSS, aby odpowiednio ustawić poziomą i pionową długość obrazu.

Przykład
Sprawdźmy przykład rozmiaru lub skalowania obrazu za pomocą właściwości CSS. Załóżmy, że mamy następujący pojemnik, na którym należy zastosować właściwości CSS:

W powyższym fragmencie kodu HTML:

• A "div„Element kontenera został dodany z klasą zadeklarowaną jako„kontenerowania".
• Wewnątrz znacznika „div” jest „img”Tag za pomocą„ID”Zadeklarowane jako„mój dokument tożsamości”I„ „src" atrybut.
• Dokładny adres obrazu z systemu został dodany jako wartość „src" atrybut. To doda wybrany obraz z systemu w pojemniku Div w wyjściu.

Teraz konieczne jest zastosowanie właściwości CSS na powyższym elemencie HTML w celu skalowania dodanego obrazu:

#mój dokument tożsamości
Szerokość: 50%;
Wysokość: 40%;

W powyższym elemencie stylu CSS:

• „„ID”Zadeklarowane w„img”Element jest dodawany w celu odnoszenia się do„" element.
• Wewnątrz div, „szerokość„Własność jest zdefiniowana jako„50%". Dostosowuje to szerokość obrazu na ekranie, aby pokryć połowę poziomego obszaru ekranu.
• Potem „„wysokość„Nieruchomość została ustawiona na„40%„Aby pokryć obszar„ 40%”całego ekranu pionowego na wyjściu.

Wygeneruje to następujący interfejs wyjściowy:

Metoda 2: Skalowanie obrazu za pomocą wartości pikseli

Kiedy CSS zmienia właściwości, ja.mi., "wysokość" I "szerokość”Są stosowane przez definiowanie dla nich wartości w pikselach, rozmiar obrazu w wyjściu zgodnie z dokładną wartością piksela zamiast dostosowywania rozmiaru obrazu zgodnie z całym obszarem ekranu.

Przykład
Zastosujmy CSS ”wysokość" I "szerokość„Właściwości, określając ich wartości w„px”(Pixels) do dokładnie tego samego fragmentu HTML dodanego w poprzedniej sekcji tego postu:

#mój dokument tożsamości
Wysokość: 250px;
szerokość: 550px;

W powyższym fragmencie kodu CSS:

• „„wysokość„Nieruchomość została ustawiona na„250px". To ustawi wysokość obrazu na dokładnie 250 pikseli.
• „„szerokość„Nieruchomość została ustawiona na„550px„Aby ustawić szerokość na dokładnie 550 pikseli na wyjściu.

Zgodnie z powyższym kodem dodany obraz zostanie skalowany w następujący sposób:

W ten sposób skalowanie obrazu w HTML.

Wniosek

Obrazy mogą być skalowane lub zmienione w dokumencie HTML za pomocą CSS ”wysokość" I "szerokość" nieruchomości. Aby je wykorzystać, zadeklaruj „ID”Lub„klasa„Dla HTML””Element, dodaj odpowiedni selektor w elemencie stylu CSS i zdefiniuj właściwości wysokości i szerokości CSS dla elementu„ ”. „Wysokość” i „szerokość” można zdefiniować, dodając wartości w procentach lub pikselach. W tym blogu omówiono podejścia do skalowania obrazów w HTML.