HTML Dostosuj rozmiar obrazu

„Bardzo często stron internetowych ma różne rodzaje. Sprawiają, że strona internetowa wygląda bardziej atrakcyjnie wizualnie. Jednak wybór odpowiedniego rozmiaru obrazu jest naprawdę ważny, ponieważ obraz nie musi być zbyt duży, aby przesłania tekst na Twojej stronie internetowej, ani zbyt mała, że ​​ledwo można go zobaczyć. Dlatego w tym samouczku porozmawiamy o tym, w jaki sposób możesz bardzo łatwo dostosować rozmiar obrazu w HTML."

Co rozumiemy, dostosowując rozmiar obrazu w HTML?

Rozmiar obrazu to połączenie jego wysokości i szerokości. Na przykład, jeśli mamy obraz rozmiaru 100 x 100, będzie to oznaczać, że wspomniany obraz będzie miał wysokość i szerokość 100 pikseli. Dostosowując rozmiar obrazu w HTML, dosłownie rozumiemy zmianę wysokości i szerokości tego obrazu zgodnie z naszymi wymaganiami. Ponadto, nie jest również obowiązkowe, aby obraz miał tę samą szerokość i wysokość. Innymi słowy, jest całkowicie normalne, aby obraz miał inną wysokość i szerokość. Poznajmy teraz metody dostosowywania rozmiaru obrazu w HTML.

Jak dostosować rozmiar obrazu w HTML?

Możesz łatwo dostosować rozmiar dowolnego z pożądanych obrazów w HTML, postępując zgodnie z jedną z dwóch metod wyjaśnionych poniżej. Jednak przed przejściem do tych metod chcielibyśmy pokazać obraz, którego rozmiar chcemy dostosować, używając tych metod. Ten obraz jest następujący:

Oryginalny rozmiar tego obrazu to 900 x 900, i.mi., Wysokość, a także szerokość tego obrazu, wynosi 900 pikseli, jak podkreślono na poniższym obrazku:

Metoda nr 1: Przy użyciu prostych właściwości wysokości i szerokości HTML

W tej metodzie będziemy używać prostych właściwości wysokości i szerokości HTML, aby dostosować rozmiar naszego określonego obrazu. Możesz przypisać dowolną wartość do wyboru do tych właściwości. Skrypt HTML dla tej metody jest następujący:

W tej metodzie skupiamy się na dostosowaniu rozmiaru obrazu, dla którego wykorzystaliśmy atrybut „IMG” HTML. Ten atrybut jest używany, gdy chcesz bawić się obrazami w HTML. Następnie użyliśmy atrybutu „SRC”, z czego odwołujemy się do dokładnej ścieżki lub lokalizacji, w której znajduje się nasz obraz docelowy. Możesz zobaczyć, że po tym atrybucie wspomnieliśmy o pełnej ścieżce naszego pożądanego obrazu. Następnie mamy atrybut „Alt”, który ma wymienić każdy alternatywny tekst do opisania obrazu. Całkowicie wolno pominąć ten atrybut. Następnie następują właściwości „szerokości” i „wysokości” HTML. Zachowaliśmy wartości obu tych właściwości jako „400”. Oznacza to, że ten skrypt wyświetli nasz obraz docelowy w zmniejszonym rozmiarze po wykonaniu.

Strona internetowa pokazana na poniższym obrazku wyświetla nasz obraz w rozmiarze 400 x 400.

Metoda nr 2: Za pomocą atrybutu stylu HTML

To tylko alternatywna metoda dostosowania rozmiaru obrazu w HTML. Wykorzystuje atrybut w stylu HTML. Aby użyć tej metody, będziesz musiał spojrzeć na następujący skrypt HTML:

Ten skrypt HTML jest prawie podobny do tego, który omówiliśmy powyżej w naszej pierwszej metodzie. Jednak tym razem, zamiast po prostu określać wartości właściwości HTML „Wysokość” i „szerokości”, użyliśmy atrybutu „Styl”, a następnie zamknęliśmy te właściwości w nim. Tym razem chcemy zmienić rozmiar naszego obrazu docelowego na 600 x 600.

Nasz określony obraz z nowo skorygowanym rozmiarem pokazano na poniższym obrazku:

Wniosek

Ten samouczek został zaprojektowany, aby poprowadzić Cię do metod dostosowania wielkości obrazu w HTML. Pod tym względem podzieliliśmy z Tobą dwie różne metody, które są naprawdę łatwe do wdrożenia. Po przejrzeniu tych dwóch metod nie będzie ci trudno dostosować rozmiarów swoich obrazów, tj.mi., Zwiększ lub zmniejsz rozmiar obrazu zgodnie z wymaganiami podczas pracy z HTML.