W HTML możemy zmienić rozmiar dowolnego obrazu na różne sposoby:
- Korzystanie z tagu HTML
- Korzystanie z atrybutu stylu Inline
- Korzystanie z wewnętrznego CSS
Korzystanie z tagu HTML
Uwaga: HTML 5 nie obsługuje atrybutów wysokości i szerokości ![]()
, więc musimy użyć wbudowanego atrybutu stylu i wewnętrznych opcji CSS, aby zmienić obraz lub rozmiar obrazu.
Jeśli chcemy zmienić rozmiar obrazu w dokumencie za pomocą Znacznik HTML który ma być wyświetlony na stronie internetowej, należy postępować zgodnie z poniższymi krokami. Wykonując poniższe kroki, możemy łatwo zmienić rozmiar obrazu:
Krok 1: Na początek musimy wpisać kod HTML w dowolnym edytorze tekstu lub otworzyć w edytorze tekstu istniejący plik HTML, w którym chcemy zmienić wielkość obrazka.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Teraz umieść kursor wewnątrz znacznika img. Następnie musimy użyć atrybutu wysokości i szerokości znacznika img, aby zmienić rozmiar obrazu. Musimy więc wpisać te atrybuty:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Krok 3: I w końcu musimy zapisać plik HTML, a następnie go uruchomić.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Przetestuj teraz
Dane wyjściowe powyższego kodu HTML pokazano na poniższym zrzucie ekranu:
Korzystanie z atrybutu stylu wbudowanego
Jeśli chcemy zmienić rozmiar obrazka za pomocą wbudowanego atrybutu stylu, który ma być wyświetlany na stronie internetowej, musimy postępować zgodnie z poniższymi krokami. Korzystając z tych kroków, możemy łatwo zmienić rozmiar obrazu.
Krok 1: Na początek musimy wpisać kod HTML w dowolnym edytorze tekstu lub otworzyć w edytorze tekstu istniejący plik HTML, w którym chcemy wykorzystać atrybut style do zmiany rozmiaru obrazka.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Teraz umieść kursor wewnątrz znacznik img tego obrazu, którego rozmiar chcemy zmienić. Następnie musimy wpisać atrybut style zaraz po atrybucie src. Następnie musimy wpisać właściwości szerokości i wysokości w atrybucie stylu, tak jak pokazano w poniższym bloku:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 3: I na koniec musimy zapisać plik HTML, a następnie go uruchomić.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Przetestuj teraz
Dane wyjściowe powyższego kodu HTML pokazano na poniższym zrzucie ekranu:
Korzystanie z wewnętrznego CSS
Jeśli chcemy zmienić rozmiar obrazka lub obrazka za pomocą wewnętrznego kaskadowego arkusza stylów, który ma być wyświetlany na stronie internetowej, musimy wykonać kroki podane poniżej. Korzystając z tych kroków, możemy łatwo zmienić rozmiar dowolnego obrazu.
Krok 1: Na początek musimy wpisać kod HTML w dowolnym edytorze tekstu lub otworzyć w edytorze tekstu istniejący plik HTML, w którym chcemy wykorzystać wewnętrzny CSS do zmiany rozmiaru obrazka.
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Krok 2: Teraz musimy umieścić kursor w znaczniku head dokumentu HTML, a następnie zdefiniować style wewnątrz tag, jak pokazano w następnym bloku. A następnie wpisz Szerokość i wysokość atrybut do selektora identyfikatora.
#imagesize { width:100px; height:100px; } Krok 3: Teraz musimy wpisać identyfikator w tagu img tego obrazu, którego rozmiar chcemy zmienić:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Przetestuj teraz Krok 5: Teraz musimy zapisać plik HTML, a następnie uruchomić plik. Poniższy zrzut ekranu przedstawia wynik powyższego kodu HTML:
