HTML'de herhangi bir görselin boyutunu aşağıdaki farklı yöntemleri kullanarak değiştirebiliriz:
- HTML etiketini kullanma
- Satır İçi stil özelliğini kullanma
- Dahili CSS kullanma
HTML etiketini kullanma
Not: HTML 5, yükseklik ve genişlik özelliğini desteklemez. ![]()
bu nedenle görseli veya resim boyutunu değiştirmek için satır içi stil özelliğini ve dahili CSS seçeneklerini kullanmamız gerekir.
Belgedeki bir görüntünün boyutunu değiştirmek istiyorsak Html etiketi Bir web sayfasında görüntülenmek isteniyorsa aşağıda verilen adımları takip etmemiz gerekmektedir. Bu adımları kullanarak görsel boyutunu kolayca değiştirebiliriz:
Aşama 1: Öncelikle görselin boyutunu değiştirmek istediğimiz herhangi bir metin düzenleyiciye Html kodunu yazmamız veya mevcut Html dosyasını metin düzenleyicide açmamız gerekiyor.
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>
Adım 2: Şimdi imleci img etiketinin içine yerleştirin. Daha sonra görselin boyutunu değiştirmek için img etiketinin height ve width özelliğini kullanmamız gerekiyor. Bu yüzden şu nitelikleri yazmamız gerekiyor:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Aşama 3: Ve son olarak Html dosyasını kaydedip çalıştırmamız gerekiyor.
tkinter çerçevesi
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>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:
Satır İçi Stil özelliğini kullanma
Bir web sayfasında görüntülenecek bir görselin boyutunu satır içi stil özelliğini kullanarak değiştirmek istiyorsak aşağıda verilen adımları takip etmemiz gerekir. Bu adımları kullanarak resim boyutunu kolayca değiştirebiliriz.
Aşama 1: Öncelikle görselin boyutunu değiştirmek için stil özelliğini kullanmak istediğimiz herhangi bir metin düzenleyicide Html kodunu yazmamız veya mevcut Html dosyasını metin düzenleyicide açmamız gerekiyor.
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>
Adım 2: Şimdi imleci img etiketi boyutunu değiştirmek istediğimiz görüntünün. Daha sonra, src niteliğinin hemen ardından style niteliğini yazmamız gerekiyor. Daha sonra, aşağıdaki blokta gösterildiği gibi stil niteliğine width ve height özelliğini yazmamız gerekir:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Aşama 3: Ve son olarak Html dosyasını kaydedip çalıştırmamız gerekiyor.
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>Şimdi Test Edin
Yukarıdaki Html kodunun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:
Dahili CSS'yi Kullanma
Bir web sayfasında görüntülenecek olan dahili basamaklı stil sayfasını kullanarak bir görüntünün veya resmin boyutunu değiştirmek istiyorsak, aşağıda verilen adımları izlememiz gerekir. Bu adımları kullanarak herhangi bir görselin boyutunu kolayca değiştirebiliriz.
Aşama 1: Öncelikle görselin boyutunu değiştirmek için dahili CSS'yi kullanmak istediğimiz herhangi bir metin düzenleyicide Html kodunu yazmamız veya mevcut Html dosyasını metin düzenleyicide açmamız gerekiyor.
android'de paskalya yumurtaları
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>
Adım 2: Şimdi imleci Html belgesinin head etiketine yerleştirmemiz ve ardından içindeki stilleri tanımlamamız gerekiyor. aşağıdaki blokta gösterildiği gibi etiketleyin. Ve ardından şunu yazın: genişlik ve yükseklik kimlik seçiciye öznitelik.
#imagesize { width:100px; height:100px; } Aşama 3: Şimdi boyutunu değiştirmek istediğimiz görselin img etiketine id’yi yazmamız gerekiyor:
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> Şimdi Test Edin Adım 5: Şimdi Html dosyasını kaydedip dosyayı çalıştırmalıyız. Aşağıdaki ekran görüntüsü yukarıdaki Html kodunun çıktısını göstermektedir:
