CSS ile Resmi Orantılı Küçültme

Logo olarak veya içerik içerisinde görsel kullanıldığında yükseklik ve genişlik boyutlarının belli oranda site görünümü açısından daha sağlıklıdır. Örneğin, aşağıdaki gibi bir probleme sahibiz:

Yukarıda bir logo yüklenmiş ancak oransız ve bu durum da çirkin bir görüntüye yol açıyor. Bunu çözmek için çok basit bir yol izleyeceğiz. Resme CSS seçicisi üzerinden ulaşacağız:

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

Yukarıda iki tane özellik belirledik. Birincisi max-width: 100%;, resmin orijinal boyutunda sahip olduğu genişlik değerinin üstüne çıkamayacağı anlamına gelmektedir. Yani orijinal genişlik değeri sınır. İkinci özellik olan height: auto; resmin içinde bulunduğu div özelliklerine bağlı olarak en otomatik yükseklik değeri alsın anlamına gelmektedir. Burada kısacası resme responsive bir özellik vermiş olduk. Bunun sonucunda elde edilen görüntü ise aşağıdaki gibidir:

Görüldüğü gibi daha iyi bir görünüm sağlanmış oldu.