tarayıcıya göre resim boyutu (bootstrap)

selam,

kullandığım wordpress temasında çoğu kısım bootstrap üzerinden referans alıyor. Yalnız eklediğim konularda olan resimler tarayıcı boyutuna göre boyut almıyor.

daha önceleri bu sorunu yazı yazarken metin kısmından resmin başına ve sonuna div kodu koyarak rahatlık ile yapabiliyordum ama söz konusu kodu unuttum. Bu konuda yardımcı bir kod paylaşırsanız sevinirim. yazıyı yazarken ben resmin başına sonuna söz konusu kodu eklerim sıkıntı olmaz

yanlış anlamadıysam image'a img-responsive class'ı vermen resimin boyutlanmasını sağlayacaktır.

Diyelim ki şöyle bir div'in, ve içinde resmin var:

<div class="divim">
<img class="resmim" src="resminyolu.png"/>
</div>

O zaman CSS kodun şöyle olmalıdır:

.divim img.resmim {
    width: 100%;
    height: auto;
}

Böylece img.resmim, .divim divinin genişliğini alacaktır.

width: 100% değil de max-width: 100% vermek daha uygun olmaz mı hocam?

max-width verirsen genişlik değeri aynı kalır, sadece genişliğin 100%'ü geçmesi durumunda çalışır diye biliyorum. min-width de minimum genişlik. İkisi birden kullanılırsa olabilir, ancak bu işi width yapıyor zaten.

merhabalar

yorumlar için teşekkürler bootstrap dosyasını incelerken img-responsive kısmını gördüm ve class="img-responsive belirterek sorunum çözüldü kısacası şu şekilde kullanıyorum ve sorunsuz şekilde işime yarıyor.

<img class="img-responsive size-full wp-image-73" src="http://******.com/wp-content/uploads/sss.jpg" alt="aes" width="600" height="278" />

yorumlar için tekrar teşekkürler herkese