CSS ile genişlik ve yükseklik HTML niteliklerini geçersiz kılma

CSS ile genişlik ve yükseklik HTML niteliklerini geçersiz kılma

CSS ile sıklıkla çatışan HTML öğelerinden biri de img öğesidir. DavidWalshBlog'daki İstek Metrikleri'nin Kümülatif Düzen Kayması Sorunlarını Düzeltme makalesinde öğrendiğimiz gibi, resim etiketi içinde resim boyutları sağlamak, web sitenizin puanını artırmaya yardımcı olacaktır. Ancak duyarlı tasarımın kral olduğu bir dünyada CSS ve HTML'nin birlikte çalışmasına ihtiyacımız var.

Çoğu duyarlı tasarım stili ayarı maksimum genişlik değerleri üzerinden yapılır, ancak görselinize yükseklik değeri verdiğinizde bozuk bir görüntü elde edebilirsiniz. Hedef her zaman görsellerin göreceli boyutlarda görüntülenmesi olmalıdır. Peki yükseklik özelliğinin maksimum genişlik değerleriyle çakışmamasını nasıl sağlayacağız?

Uzmanların Görüşleri

Cevap yükseklik kadar kolay: otomatik!

Nasıl Önlem Alınmalı?

/* herhangi bir medya sorgusunu varsayarak */ img { /* Görüntünün ekranın dışına çıkmadığından emin olun */ max-width: 500px; /* HTML özelliğinden bağımsız olarak görüntü yüksekliğinin duyarlı olduğundan emin olun */ height: auto; }

Sonuç ve Değerlendirme

Kullanıcıları ve arama motorlarını memnun etme dansı her zaman eğlenceli bir dengedir. CSS ve HTML'nin hiçbir zaman çakışması amaçlanmamıştır, ancak bazı durumlarda çelişmektedir. Hem kullanıcılar hem de arama motorları için optimizasyon yapmak için bu kodu kullanın!