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:

html resim boyutlandırma

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:

istanbul manzara

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:

istanbul manzara
Görüntüleri HTML / CSS ile yeniden boyutlandırma yalnızca gerektiğinde yapılmalıdır. Bunun nedeni, HTML ile yeniden boyutlandırmanın dosya boyutunu azaltmamasıdır Buda büyük resim dosyaları indirilirken sitenizde yavaşlamalar sözkonusu olur.
Bu nedenle, mümkünse, web sitenize / blogunuza yüklemeden önce bir resim düzenleyicide ( GIMP, PHOTOSHOP gibi ) proğram kullanarak resmi doğru boyutlara göre yeniden boyutlandırın.

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:

istanbul

Sevda Xasiyeva 04/06/2020

Salam. Çox bəyəndim dərslərinizi, təşəkkür edirəm belə dərslər hazırladığınız üçün çox şey öyrənirəm sayənizdə, çox xahiş edirəm html və css aid hazırladığınız bu dərslərin pdf varsa atdın zəhmət olmasa öncədən çox təşəkkür edirəm.

yönetici 06/06/2020

Sevda, Hazır bir .pdf dosyası yok. Bütün dersler websitede anlatılmakta.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

2371

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.