HTML Resim Boyutlandırma

Websitedeki görüntülerin iki işlevi vardır: birincisi, kaynağın görünümünü iyileştirir ve ikincisi, bilgileri daha iyi algılamaya yardımcı olurlar.

HTML'deki bir resmi yeniden boyutlandırmak için <img> etiketinin width ve height niteliklerini kullanın. Görüntüleri yeniden boyutlandırmak için çeşitli CSS özelliklerini de kullanabilirsiniz.

İşte orijinal boyutunda bir resim:

HTML:

<img src="istanbul.jpg" alt="istanbul manzara">

ÇIKTI:

Cihazınız yeniden boyutlandırılmadıkça, bu orijinal boyutunda olmalıdır.

HTML ile yeniden boyutlandırma

img src HTML etiketinizdeki genişliği(width) ve yüksekliği(height) aşağıdaki örnekte gösterildiği gibi belirtin.

<img src="istanbul.jpg" width="300" height="250" alt="istanbul manzara">

ÇIKTI:

CSS ile yeniden boyutlandırma

HTML'deki görüntüleri yeniden boyutlandırmak için CSS kullanmak genellikle daha iyidir. Bunu style özelliğine height ve width özellikleriyle ekleyerek yapabilirsiniz.

<img src="istanbul.jpg" style="width:200px;height: 200px" alt="istanbul">

ÇIKTI:

Responsive (Duyarlı) web tasarımının önemli parçalarından biridir, Resmi kutunun genişliğine sığacak şekilde otomatik olarak yeniden boyutlandırmaktır. Çünkü günümüzde ziyaretciler birkaç çeşit masaüstü, mobil, tablet kullanıyor ve web sayfalarımız her türlü ekrana uymalı.

Şimdi, görüntüleri yalnızca HTML ve CSS ile yeniden boyutlandırmanın ve duyarlı görüntüler oluşturmanın yolunu öğrenelim.

CSS:

img {
      max-width:100%;
      height: auto;
      }

HTML etiketlerde inline kullanım:

<img src="istanbul.jpg" style="max-width:100%;height: auto;" alt="istanbul">

ÇIKTI: