jQuery परिवर्तन छवि की ऊंचाई पहलू अनुपात रखने
तो मैं गैलरी, जहां ज्यादातर अपनी छवियों वर्तमान में सीएसएस द्वारा 100% नियंत्रित कर रहे हैं की है। हालांकि, न्यूनतम ऊंचाई निर्धारित करने में: 100%; मेरी छवियों पर, मैं कुछ खींचने का कारण बनता हूं। मेरे पास बहुत अधिक समस्याग्रस्त तस्वीरें नहीं हैं, लेकिन यह मेरे नियंत्रण से बाहर है कि उपयोगकर्ता अपलोड करेगा।
क्या jQuery के साथ वैसे भी मैं छवि की ऊंचाई प्राप्त कर सकता हूं और जांच सकता हूं कि यह एक आवश्यकता को पूरा कर रहा है, और यदि नहीं, तो ऊंचाई की आवश्यकता को पूरा करने के लिए छवि चौड़ाई को बढ़ाएं, लेकिन चीजों को अनुपात में रखें? इसलिए मैं किसी विकृति के कारण होने से बचता हूं लेकिन अंतराल के बिना divs को गैलरी को साफ रखता हूं।
नोट: प्रदान की गई छवि तब होती है जब मैं अपना min-height: 100%; हटा देता हूं ताकि आप मेरी समस्या देख सकें।How to resize images proportionally/keeping the aspect ratio?
अपडेट - - - -
मैं एक समाधान पल के लिए ठीक काम करने के लिए लगता है कि मिल गया है, यह सबसे अच्छा करने का प्रयास लेकिन मैं एक और जवाब यह है कि मुझे मदद की पाया नहीं हो सकता है
मैंने कभी भी कोड को इतनी थोड़ी थोड़ी सी tweaked, अब अगर कोई छवि minHeight को पूरा नहीं करती है तो यह छवि को अनुपात में आकार बदल देगी, जब तक कि minHeight तक पहुंच न जाए। परीक्षण में मेरे लिए ठीक काम लगता है।
** अद्यतन अंतिम ********* चारों ओर खेलने के बाद मैंने थंब स्क्रिप्ट से एक छोटा सा स्निपिट लिया, केवल वह हिस्सा जहां यह पूरी तरह से कंटेनर के भीतर छवियों को स्थान देता है।
$(window).load(function() {
$('.thumbnail img').each(function() {
var maxWidth = 320; // Max width for the image
var minHeight = 270; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
if(width > maxWidth){
ratio = maxWidth/width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < minHeight){
ratio = minHeight/height; // get ratio for scaling image
$(this).css("height", minHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
var $img = $(this),
css = {
position: 'absolute',
marginLeft: '-' + (parseInt($img.css('width'))/2) + 'px',
left: '50%',
top: '50%',
marginTop: '-' + (parseInt($img.css('height'))/2) + 'px'
};
$img.css(css);
});
});
यह मेरे सभी थंबनेल के माध्यम से loops, तदनुसार उन्हें आकार देता है। तो यदि न्यूनतम ऊंचाई पूरी नहीं हुई है, तो छवि को तब तक बढ़ाया जाएगा जब तक कि ऊंचाई मेरे थंबनेल कंटेनर को फिट न करे। फिर निचला भाग छवि को केंद्रित करने के लिए मार्जिन पर कितना कम करना है, यह जानने के लिए, प्रत्येक छवि को पूरी तरह से ले लेंगे, और चौड़ाई और ऊंचाई लें और 2 से विभाजित करें। मैं अभी भी इसे tweaking कर रहा हूँ, लेकिन इस समय मेरे लिए अच्छा काम करने लगता है। मैं उम्मीद करता हूं कि इससे किसी की मदद होगी।
वैकल्पिक रूप से एक ऐसी ही मुद्दा मैं इस पाया साथ
सभी लोग: http://joanpiedra.com/jquery/thumbs/ मैं अपने खुद के लेखन वास्तव में यह करने के लिए शुरू हो गया था, लेकिन im यह कैसे अच्छी तरह से काम पर गौर करने और इसे अनुकूलित रूप में की जरूरत के लिए जा रहा।
[जावास्क्रिप्ट के साथ छवि आकार प्राप्त करें] (http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) – Eich
आपको इससे कुछ मदद मिल सकती है, http://stackoverflow.com/questions/1682495/jquery-resize-to-aspect-ratio?rq=1 – Hoque