छवियों को कम करने की अनुमति देना, लेकिन

Question

खिंचाव नहीं है मेरे पास 4,000+ पृष्ठों और प्रति पृष्ठ 10 या अधिक जेपीईजी छवियों के साथ एक साइट है, जो विभिन्न आकारों के हैं। मैं साइट को और अधिक मोबाइल अनुकूल बनाने की कोशिश कर रहा हूं। इसके लिए, मैं छवियों के लिए छोटी स्क्रीन पर फिट होने के लिए इसे कम करना चाहता हूं। मुझे पता है कि मैं संकेत देने के लिए कि छवियों हटना कर सकते हैं कुछ इस तरह कर सकते हैं:

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

लेकिन क्या होगा अगर नहीं सभी छवियों 357 (या जो भी) की चौड़ाई है, और है मैं नहीं चाहता छोटे आकार के चित्रों से परे फैला उनके असली आयाम? और बस चीजों को और मजेदार बनाने के लिए, क्या होगा अगर छवि टैग में ऊंचाई और चौड़ाई विशेषताओं को निर्दिष्ट न किया जाए?

मेरा लक्ष्य एक समाधान ढूंढना है जिसके लिए मुझे हजारों छवि कॉल मैन्युअल रूप से समायोजित करने की आवश्यकता नहीं है, लेकिन मैं एक खोज और प्रतिस्थापन कर सकता हूं। छवियाँ वर्तमान में एक div कंटेनर में लिपटे रहे हैं और एक वर्ग है, इसलिए की तरह:

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

मैं भी संभावना है कि मैं पूरी तरह से गलत तरीके से इस बारे में जा रहा हूँ के लिए खुला रहा हूँ।

Answer 1

max-width का उपयोग करना सरल, प्रभावी है, और कोई जावास्क्रिप्ट की आवश्यकता नहीं है।

नीचे दिया गया सीएसएस उत्तरदायी छवियों को बनाता है जो कंटेनर की चौड़ाई को फिट करने के लिए संकीर्ण होते हैं लेकिन उनके मूल आकार से आगे नहीं बढ़ेंगे।

img.bodyImg { 
    max-width:100% 
} 

नीचे दिए गए प्रदर्शन में, दोनों छवियां 300px X 75px हैं। पहला कंटेनर 200px चौड़ा है और दूसरा 400px चौड़ा है। ध्यान दें कि पहली छवि कंटेनर में फिट होने के लिए घट जाती है, लेकिन दूसरी छवि अपने मूल आकार से आगे नहीं बढ़ती है। यह भी ध्यान रखें कि प्रत्येक छवि का अनुपात सटीक रहता है।

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>

अतिरिक्त नोट्स

1. मैं display:block शामिल किया है छवि के नीचे descender space दूर करने के लिए।
2. यदि आपकी छवियों में विशिष्ट ऊंचाई और चौड़ाई विशेषताओं (जैसे वे arguably should) हैं, तो आप उन गुणों को ओवरराइड करने के लिए height:auto और/या width:auto जोड़ सकते हैं। उत्तरदायी छवियों के लिए
3. Bootstrap uses this method।

Answer 2

आप बाद में प्रत्येक छवि के लिए figure out each image's native width एक छोटे से jQuery का उपयोग कर सकते हैं, और सेट perscriptive अधिकतम-चौड़ाई:

$('.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 
    }); 


} 

अद्यतन: और आप प्रत्येक छवि चाहते हैं, तो एक समान चौड़ाई, आप छोटी से छोटी अधिकतम चौड़ाई की दुकान और छवियों के सभी पर लागू कर सकते हैं:

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

क्यों नहीं बस:

+०१२३५१६४१०

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

अपने सीएसएस में max-width:100% and height: auto का उपयोग करने का प्रयास करें।यदि आप अपनी साइट को मोबाइल अनुकूल बनाना चाहते हैं तो मैं अधिक लचीलापन के लिए बूटस्ट्रैप ढांचे में दिखने का सुझाव दूंगा।