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