Blogger'da CSS ile Resimleri Yeniden Boyutlandırma

Blogger'da makale yazarken kullandığınız resimlerin genişlik ve yükseklik değerleri sabit olduğunda yaptığımız tasarımlar günümüzde kullanılan tüm cihazlarda istediğimiz gibi görünmez. Mobil cihazların yaygınlaşması ile birlikte hem masaüstü hemde mobil cihazlarda düzgün görüntülenebilen responsive tasarımlar yaygınlaştı. Hazırladığımız CSS kodu ile blogunuzun yazı alanı içindeki resimleri otomatik olarak yeniden boyutlanabilir duruma getireceksiniz.

Kullandığımız kodun açıklaması şöyle: genişlik ve yükseklik otomatik, yani orijinal resmin boyutlarını kullan anlamına geliyor ancak kullandığımız max-height ve max-width değerleri ile maximum genişlik ve yükseklik değerlerini sınırlandırıyoruz. Genişlik yazı alanını aşamayacak yükseklik ise 300px'i aşamayacak. Kodları ihtiyacınıza göre değiştirebilirsiniz.

.post-body img {
 height:auto;
 max-height:300px;
 width: auto;
 max-width:100%;
 clear: both;
}