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.

Hiç yorum yok:

Yorum Gönderme