Ana div'in% 100'ü kadar, ancak kendi genişliğinden büyük olmayan bir resim genişliği oluştur

Bir görüntünün (dinamik olarak yerleştirilmiş, boyutlar üzerinde herhangi bir kısıtlama olmaksızın) üst div'i kadar geniş olmasını sağlamaya çalışıyorum, ancak bu genişlik% 100'deki kendi genişliğinden daha geniş olmadığı sürece. Bunu denedim, boşuna:

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

Bu görüntülerin birçoğu ana div'lerinden çok daha geniştir, bu yüzden onlara göre yeniden boyutlandırmalarını isterim, ancak küçük bir görüntü ortaya çıktığında ve normal boyutlarının ötesine ölçeklendiğinde, gerçekten korkunç görünüyor. Bunu yapmanın bir yolu var mı?

Sadece max-width: 100%tek başına belirtin , bunu yapmalı.

Bu gönderiyi bir Google aramasında buldum ve sorunumu @jwal yanıtı sayesinde çözdü, ancak çözümüne bir ekleme yaptım.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Yukarıdakilerle maksimum genişliği, resmimin içinde bulunduğu içerik konteynerinin boyutlarına değiştirdim. Bu durumda: konteyner genişliği - dolgu - yatılı = maksimum genişlik

Bu şekilde resmim içeren div'den çıkmaz ve yine de içeriği content div içinde gezdirebilirim.

IE 9, FireFox 18.0.2 ve Chrome 25.0.1364.97, Safari iOS'ta test ettim ve çalışıyor gibi görünüyor.

Ek: Bunu 1024 piksel genişliğinde 678 piksel (maksimum genişlik) görüntülenen ve 500 piksel (görüntünün genişliği) 500 piksel genişliğinde görüntülenen bir görüntü üzerinde test ettim.

Genişliği% 100 olarak ayarlamak, orijinal tam boyutlu görüntü değil, içinde bulunduğu div'in tam genişliğidir. JavaScript veya görüntüyü ölçebilen başka bir komut dosyası dili olmadan bunu yapmanın bir yolu yoktur. Div'in sabit genişliğine veya sabit yüksekliğine sahipseniz (200 piksel genişliğinde olduğu gibi) , görüntüye doldurulacak bir aralık vermek çok zor olmamalıdır . Ancak, 200x300 piksellik bir kutuya 20x20 piksellik bir görüntü koyarsanız, yine de bozulacaktır.

Çizgi tarzında - bu her seferinde benim için çalışıyor

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Maksimum genişliği ayarlamalısınız ve isterseniz kenarlardan birine biraz dolgu da ayarlayabilirsiniz. Benim durumumda maksimum genişlik:% 100 iyiydi ancak görüntü ekranın hemen sonundaydı.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Ben de aynı sorunu yaşıyordum, ancak CSS'mdeki yükseklik değerini otomatik olarak ayarladım ve bu sorunumu çözdü. Ayrıca, display özelliğini yapmayı da unutmayın.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Benim için işe yarayan bir cevap buldum ve aşağıdaki bağlantıda bulunabilir:

Sınırlı Genişlikteki Üst Öğelerde Tam Genişlikli Kaplar

Görüntü ebeveynden daha küçükse ...

.img_100 {
  width: 100%;
}

Mülkü kullanırdım display: table-cell

İşte bağlantı