Html Foto Ekleme Boyutlandırma

HTML’de Fotoğraf Ekleme ve Boyutlandırma: Kapsamlı Bir Kılavuz

Web sayfalarına görsel öğeler eklemek, kullanıcı deneyimini geliştirmek ve içeriğin çekiciliğini artırmak için çok önemlidir. Fotoğraflar, web sayfalarına görsel ilgi katmanın ve mesajınızı daha etkili bir şekilde iletmenin güçlü bir yoludur. HTML’de fotoğraf eklemek ve boyutlandırmak, web geliştirmenin temel bir yönüdür ve bu makale, bu görevi başarıyla gerçekleştirmek için kapsamlı bir kılavuz sağlayacaktır.

HTML’de Fotoğraf Ekleme

Bir web sayfasına fotoğraf eklemek için <img> etiketini kullanırız. Bu etiket, aşağıdaki özniteliklere sahip olmalıdır:

  • src: Fotoğrafın dosya yolunu belirtir.
  • alt: Fotoğrafın alternatif bir metin açıklamasını sağlar. Bu, görsel engelli kullanıcılar veya görseller yüklenmediğinde görüntülenen metin için önemlidir.

Örneğin, aşağıdaki kod bir web sayfasına “resim.jpg” adlı bir fotoğraf ekler:

html
<img src="resim.jpg" alt="Web sitesi logosu">

Fotoğraf Boyutlandırma

Fotoğraflar web sayfalarına eklendikten sonra, genellikle boyutlandırılması gerekir. Fotoğrafların boyutunu ayarlamak için aşağıdaki CSS özelliklerini kullanabiliriz:

  • width: Fotoğrafın genişliğini piksel veya yüzde olarak ayarlar.
  • height: Fotoğrafın yüksekliğini piksel veya yüzde olarak ayarlar.
  • max-width: Fotoğrafın maksimum genişliğini ayarlar.
  • max-height: Fotoğrafın maksimum yüksekliğini ayarlar.

Örneğin, aşağıdaki CSS kodu bir fotoğrafın genişliğini 200 piksele ve yüksekliğini 150 piksele ayarlar:

css
img {
width: 200px;
height: 150px;
}

Duyarlı Görüntüler

Günümüzün web’inde, farklı ekran boyutlarına sahip çok çeşitli cihazlar kullanılmaktadır. Fotoğrafların tüm bu cihazlarda düzgün görünmesini sağlamak için duyarlı görüntüler kullanmak önemlidir. Duyarlı görüntüler, ekran boyutuna bağlı olarak otomatik olarak yeniden boyutlandırılır.

Duyarlı görüntüler oluşturmak için <picture> ve <source> etiketlerini kullanırız. <picture> etiketi, farklı ekran boyutları için birden fazla görüntü kaynağı belirlememize olanak tanır. <source> etiketi, belirli bir ekran boyutu için bir görüntü kaynağı belirtir.

Örneğin, aşağıdaki kod, farklı ekran boyutları için üç farklı görüntü kaynağı belirtir:

html
<picture>
<source media="(max-width: 480px)" srcset="resim-mobil.jpg">
<source media="(max-width: 768px)" srcset="resim-tablet.jpg">
<img src="resim-masaüstü.jpg" alt="Web sitesi logosu">
</picture>

Faydalı Kaynaklar

Sonuç

HTML’de fotoğraf eklemek ve boyutlandırmak, web geliştirmenin önemli bir yönüdür. Bu makalede sağlanan bilgilerle, web sayfalarınıza kolayca fotoğraf ekleyebilir ve bunları farklı ekran boyutlarına uyacak şekilde boyutlandırabilirsiniz. Duyarlı görüntüler kullanarak, fotoğraflarınızın tüm cihazlarda harika görünmesini sağlayabilirsiniz.

Yayımlandı

kategorisi