Resimler Nasıl Responsive Yapılır

CSS Media Query Kullanmadan Sitedeki Bir Resmi Nasıl Responsive Hale Getiririz?

Ön Yüz(Front End) geliştirme ile uğraşan herkesin bildiği gibi, bir web sayfası responsive hale getirilmek istendiğinde, tasarımdaki nesnelerin farklı ekran boyutları için nasıl öçleklendirileceğini CSS Media Query metodlarını kullanarak belirliyoruz.  Stilleri yazdığımız css dosyamızın içine @media ile başlayan aşağıdaki gördüğünüze benzeyen özel kodlama yöntemini kullanarak aynı eleman ya da classlar için farklı CSS kuralları belirleyebiliyoruz. 

@media screen and (max-width: 680px) {
    img .resim1{
        width:200px;
        height:150px;
    }
}

Yukarıdaki kod genişliği 680 pixelden küçük olan ekranlarda resim1 Class'ına sahip img elemanı için yeni bir boyutlandırma tanımlıyor. Ancak her ölçü için ayrı ayrı media query'ler oluşturmak bazen sizin için sıkıcı ve zaman ve alan bir uğraşı olabilir. Özellikle resim elemanlarının her ekran boyutuna otomatik olarak ölçeklenmelerini sağlamak için aşağıdaki CSS kodunu kullanmanız hayatınızı baya kolaylaştıracaktır. İşte size resimleri responsive yapan CSS kodu:

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

Ne kadar basitmiş değil mi? uygulamasını görmek için aşağıdaki armut resmine(laf aramızda armutu çok severim)  tıklayın ve boyutunu değiştirin.