HTML pozwala nam używać obrazów na stronach internetowych i uatrakcyjniać je poprzez zastosowanie różnych stylów. Jeśli chcesz zmienić proporcje obrazu lub obraz nie pasuje do układu strony internetowej, możesz zmienić jego rozmiar. W tym celu możesz wykorzystać „ szerokość ' oraz ' wzrost ” właściwości na “ obrazek ” tag. Te wartości właściwości można łatwo ustawić w pikselach CSS.

W tym podręczniku poznasz metodę zmiany rozmiaru obrazu w HTML.

Przed rozpoczęciem wymagane jest dodanie obrazu do pliku HTML, na którym zostanie wykonana operacja zmiany rozmiaru obrazu.

Jak osadzić obraz w HTML?

Aby dodać obraz w HTML, użyj następującej składni:

Opis powyższej składni jest opisany poniżej. „ obrazek ” używa dwóch atrybutów:

• • „src” służy do podania ścieżki (URL) obrazu.
  • 'wszystko' służy do podania tekstu alternatywnego, jeśli obraz nie jest wyświetlany.

HTML

Poniższy kod reprezentuje dwa div. W pierwszym div dodaliśmy nagłówek w górnej środkowej części naszej strony internetowej jako „ Rozmiar obrazu w HTML ” za pomocą tagu

:

< div >
< środek >
< h1 > Rozmiar obrazu w HTML h1 >
środek >
div >

Drugi div jest dodawany z klasą o nazwie „ pojemnik ” i do reprezentowania obrazu w środku użyliśmy tagu

. W środku napisz poniższy kod, aby dodać obraz:

< div klasa = 'pojemnik' >
< środek >
< obrazek src = 'obrazy/motyl.jpg' wszystko = 'alternatywny tekst' >
środek >
div >

Wybrany obraz z „ 640*437 ” proporcje będą wyglądać tak:

W następnej sekcji zademonstrujemy metodę zmiany rozmiaru obrazu.

Jak zmienić rozmiar obrazu w HTML?

Możesz dostosować rozmiar obrazu lub zmienić jego rozmiar, używając „ szerokość ' oraz ' wzrost ”, aby ustawić jego szerokość i wysokość.

Teraz ustawmy wartość szerokości dodawanego obrazu jako „ 300 ” i zobacz jak to działa:

< obrazek src = 'obrazy/motyl.jpg' wszystko = 'alternatywny tekst' szerokość = '300' >

Widać, że szerokość obrazu została zmieniona, a jego rozmiar został pomyślnie zmieniony:

Oprócz szerokości „ wzrost Atrybut ” można również wykorzystać w tym samym celu. Aby zobaczyć różnicę wielkości, ustaw „ 550 ” piksele jako wysokość obrazu:

< obrazek src = 'obrazy/motyl.jpg' wszystko = 'alternatywny tekst' szerokość = '300' wzrost = '550' >

Możesz wyraźnie zaobserwować różnicę w wielkości obrazu:

W ten sposób atrybuty szerokości i wysokości są używane do zmiany rozmiaru obrazu.

Wniosek

W języku HTML „ wzrost ' oraz ' szerokość Atrybuty są wykorzystywane do zmiany rozmiaru obrazu. Możesz zmienić domyślne proporcje dodanego obrazu, ustawiając wartości tych atrybutów. W rezultacie widać wyraźną różnicę w wielkości obrazu. Ten blog zademonstrował metodę używania właściwości wysokości i wagi do zmiany rozmiaru obrazów w HTML.