CSS'de Resimleri Standart Boyutlandırmayı Anlattım

Simdi arkadaşlar örnek bir soru ile başlayalım

Soru1: sitemde resimler orjinal boyutlarıyla çıkıyor kimisi büyük kimisi küçük ben bunları standart boyutta nasıl yaparım?

Css de resim boyut kodları neler
height: 150px; (resmin yüksekliği 150px)
width: 150px; (resmin genişliği 150px)
Bu kare bir resim arkadaşlar

Şimdi ben sitemdeki resimler 150x150 olsun istersem yukardaki değerler yeterlimi hayır.

max-height: 150px; (resim yüksekliği en fazla 150px olsun)
max-width: 150px; (resim genişliği en fazla 150px olsun)

Şimdi alttaki kodumuza tüm bu değerleri ekledik

height: 150px;
width: 150px;
max-height: 150px;
max-width: 150px;

Burda nedemek istiyoruz resimin uzunluğu ve genişliği 150px olsun maximum yükseklik ve maximum genişlik 150px i geçmesin yani 300px resim bile şuan 150 çıkıcak

Simdi resimler standart oldumu hayır
150px in altındaki resimleri hesaba kattıkmı hayır. Yani 100x100 bi resim 150x150 çıkmıycak çünkü biz maximum verdik.
Yani ne demiş olduk 150px in altındaki resimler boyutu ne ise öyle çıksın. Ama 150px den büyük resimler 150px çıksın

Peki 150px in altındakilerinide nasıl eşitliycez görelim

min-height: 150px; (resim yüksekliği en az 150px olsun)
min-width: 150px; (resim genişliği en az 150px olsun)

height: 150px;
width: 150px;
max-height: 150px;
max-width: 150px;
min-height: 150px;
min-width: 150px;

Bakın şimdi standart oldu en yüksek resmide 150 yaptık en düşük resmide 150 yaptık.

soru 2 benim için resimlerin genişliği önemli değil yüksekliği standart olsun

ozaman şöyle yapıcaz

height: 150px;
max-height: 150px;
max-width: 100%; (100% demek tüm genişliği kaplasın)
min-height: 150px;
min-width: 100%;

soru 3 benim için resimlerin yüksekliği önemli değil genişliği standart olsun

burda şöyle yapıcaz

height: auto; (auto demek boyut ne ise öyle çıksın demek)
max-height: auto;
max-width: 150px;
min-height: auto;
min-width: 150px;

mantık bu

Sorularınız varsa yazabilirsiniz

Yani tüm değerleri aynı vermemiz lazım ok