Görüntülerin küçültmesine izin veriliyor, ancak sıkmıyor

Question

Her sayfada 4.000+ sayfa ve her boyutta 10 veya daha fazla jpeg resmi var. Siteyi daha hareketli hale getirmeye çalışıyorum. Bu amaçla, görüntülerin daha küçük ekranlara sığacak şekilde küçültülmesini sağlamak istiyorum. Ben görüntüleri küçültmek edebileceğini bildirmek için böyle bir şey yapabileceğini biliyoruz: tüm görüntüleri 357 (ya da herneyse) bir genişliğe sahip ve ben istemiyorsanız

img.bodyImg 
{ 
width: 100%; 
max-width: 357px; 
height: auto; 
} 

Ama küçük resim ötesine gerilmiş neyi gerçek boyutları? Ve sadece işleri daha eğlenceli hale getirmek için, resimlerde yükseklik ve genişlik özellikleri belirtilmemişse ne olur?

Amacım, on binlerce görüntülü aramayı manuel olarak ayarlamamı gerektirmeyen bir çözüm bulmaktır, ancak bir arama yapabilir ve değiştirebilirim. Görüntüler şu anda şöyle bir div konteyner sarılmış ve bir sınıf var gibidir:

<div class="imgDiv"><img class="bodyImg" src="http://www.example.com/image.jpg"></div> 

Ben de ben tamamen yanlış bir şekilde bu konuda gidiyorum olasılığı açığım.

Answer 1

max-width'u kullanmak çok basit, etkilidir ve JavaScript gerektirmez.

Aşağıdaki CSS, konteynerin enine sığacak şekilde küçülen, ancak kendi yerel boyutlarının ötesine genişlemeyen duyarlı görüntüler oluşturur.

img.bodyImg { 
    max-width:100% 
} 

Aşağıdaki örnekte, her iki görüntü de 300 piksel x 75 pikseldir. İlk konteyner 200px genişliğinde, ikincisi 400 piksel genişliğindedir. İlk görüntünün konteynere sığacak şekilde küçüldüğünü, ancak ikinci görüntünün yerel boyutunun ötesine genişlemediğine dikkat edin. Ayrıca, her resmin oranlarının doğru kaldığını unutmayın.

div { 
 
    background-color: #CCC; 
 
    margin:0 0 .5em; 
 
    padding:.25em; 
 
} 
 
div.one { 
 
    width: 200px; 
 
} 
 
div.two { 
 
    width: 400px; 
 
} 
 
img { 
 
    display:block; 
 
    max-width: 100%; 
 
}

<div class="one"> 
 
    <img src="http://lorempixel.com/300/75/abstract/4/" /> 
 
</div> 
 
<div class="two"> 
 
    <img src="http://lorempixel.com/300/75/abstract/4/" /> 
 
</div>

Ek Notlar

1. Ben resmin altına descender space kaldırmak için display:block dahil ettik.
2. Görüntüleriniz belirli yükseklik ve genişlik niteliklerine sahipse (arguably should oldukları gibi), bu öznitelikleri geçersiz kılmak için height:auto ve/veya width:auto ekleyin. Duyarlı görüntüler için
3. Bootstrap uses this method.

Answer 2

Sen sonradan her resim için perscriptive max-genişlikleri figure out each image's native width biraz jQuery kullanmak ve ayarlayabilirsiniz:

$('.bodyImg').each(function() { 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = $(this).attr("src"); 

    // Get accurate measurements from that. 
    var imageWidth = theImage.width; 

    $(this).css({ 
    "max-width" : imageWidth 
    }); 


} 

GÜNCELLEME: Ve tek tip genişliğe sahip her görüntüyü isterseniz, En küçük maksimum genişliğini saklamak ve görüntülerin tümüne uygulayabilirsiniz:

var smallMax; 
$('.bodyImg').each(function() { 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = $(this).attr("src"); 

    // Get accurate measurements from that. 
    var imageWidth = theImage.width; 

    // if the variable exists and is bigger than 
    // the current width, use the new max width 
    if (smallMax !== undefined && smallMax > imageWidth) { 
    smallMax = imageWidth; 
    } 
    // set the variable if it hasn't been set yet 
    else if (smallMax == undefined) { 
    smallMax = imageWidth; 
    } 
    // keep the old variable if it is defined and smaller 
    else {} 


    $(this).css({ 
    "max-width" : smallMax 
    }); 


} 

Answer 3

Neden sadece:

max-width:100%; /*Ensure the width scales to the width of the parent container*/ 
width:auto; /* Not required, but sometimes is nice to ensure the width not being overridden by other factors like browser quirks */ 
height: auto; /*Ensure the image keeps its ratio*/ 

Answer 4

CSS'nizde max-width:100% and height: auto kullanmayı deneyin.Sitenizi mobil uyumlu hale getirmek istiyorsanız, daha fazla esneklik için önyükleme çerçevesine bakmanızı öneririm.