Html-css leresimlerin otomatik boyutlandırma :
Varsayalım bir site tasarlıyoruz ve kullanıcıların eklediği resimlerin tasarım alanlarımızın dışına taşmasına engel olmak istiyor, engel olurken de resmin görünümünü bozmadan küçültmek istiyoruz. Ya da bizim dışımızda üyelerinde veri girdiği bir paylaşım sitemiz var ve böylesi bir sorunla karşı karşıyayız… Bu sorunu çözmek için, kod yazarak resmin boyutlarını alıp, yeniden orantılı biçimde düzenleyerek uğraştığımız ya da uğraşanlar olmuştur.

.blok img{
border-width: 0;
margin-top: 0;
margin-bottom: 0;
max-width:666px;
}

ax-width:666px; satırı resmin genişliğinin en fazla alabileceği değeri belirler. örneğin resimin genişliği 1024px olsun, CSS kodlarımız sayesinde resim en fazla 666px genişlik alabilir. Bu haliyle resimlerin sayfalarımızı bozmasının önüne geçmiş olduk, fakat henüz bitmedi. Çünkü genişliği daraltılmışken yüksekliği sabit kaldığı için ağzı burnu yamulmuş resimlerle karşılaşabiliriz.
Fakat bu sefer resim ince uzun bir biçimde aşağı doğru uzuyor. Bu sorunu da çözmek için yine CSS kodlarımızda, maksimum genişliği atadığımız satırın üzerine, genişliği de, yüksekliği de auto(otomatik) belirlemesini sağlarsak, resim ince uzun şekiller almayacak ve orantılı bir biçimde yeniden ölçeklendirilecektir.

Bu işlemi yapacağımız kodlarımızda aşağıdaki gibi olacak

.blok img{
border-width: 0;
margin-top: 0;
margin-bottom: 0;
height:auto;
max-width:666px;
}

Şimdi sonuca tekrar bakalım. İşte hepsi bu kadar!