सीएसएस का उपयोग कर आनुपातिक रूप से छवि आकार बदल रहा है?

मैं अपनी थंबनेल गैलरी को कॉन्फ़िगर करने के लिए अब कुछ दिनों के लिए प्रयास कर रहा हूं ताकि सभी छवियां समान ऊंचाई और चौड़ाई दिखाई दे सकें। लेकिन जब मैं CSS कोड को,सीएसएस का उपयोग कर आनुपातिक रूप से छवि आकार बदल रहा है?

max-height: 150px; 
max-width: 200px; 
width: 120px; 
height: 120px;

बदल मैं छवियों है कि सभी एक ही आकार लेकिन पहलू अनुपात छवियों को बर्बाद कर फैला है मिलता है। क्या छवि कंटेनर का आकार बदलने का कोई तरीका नहीं है, न कि छवि के बजाय? मुझे पहलू अनुपात रखने की इजाजत दी। लेकिन अभी भी छवि का आकार बदलें। (अगर मैं कुछ छवि को काटता हूं तो मुझे कोई फर्क नहीं पड़ता।)

अग्रिम धन्यवाद!

स्रोत

2013-03-28 Beaniie

116

यह सीएसएस आकार बदलने के साथ एक ज्ञात समस्या है, जब तक कि सभी छवियों का अनुपात समान न हो, आपके पास सीएसएस के माध्यम से ऐसा करने का कोई तरीका नहीं है।

सबसे अच्छा तरीका एक कंटेनर रखना होगा, और छवियों में से एक आयाम (हमेशा वही) का आकार बदलना होगा। मेरे उदाहरण में मैंने चौड़ाई का आकार बदल दिया।

यदि कंटेनर में निर्दिष्ट आयाम है (मेरे उदाहरण में चौड़ाई), छवि को 100% पर चौड़ाई रखने के लिए कहने पर, यह कंटेनर की पूरी चौड़ाई बना देगा। ऊंचाई पर auto छवि को नई चौड़ाई के लिए आनुपातिक ऊंचाई बना देगा।

पूर्व:

HTML:

<div class="container"> 
<img src="something.png" /> 
</div> 

<div class="container"> 
<img src="something2.png" /> 
</div>

सीएसएस:

.container { 
    width: 200px; 
    height: 120px; 
} 

/* resize images */ 
.container img { 
    width: 100%; 
    height: auto; 
}

स्रोत

2013-03-28 15:27:23 jackJoe

आपको एक तरफ (उदाहरण के लिए ऊंचाई) को ठीक करने की आवश्यकता है और दूसरे को auto पर सेट करना होगा।

जैसे

height: 120px; 
width: auto;

कि केवल एक तरफ के आधार पर छवि को मापना होगा। आप छवि स्वीकार्य फसल मिल जाए, तो आप सिर्फ पेरेंट तत्व है, जो कुछ भी है कि अन्यथा इसके आकार को पार कर जाएगा फसल होगी

overflow: hidden;

सेट कर सकते हैं।

स्रोत

2013-03-28 15:23:32 hexblot

मैं इस की कोशिश की है, लेकिन यह अभी भी मुझे छवियाँ हैं कि सभी विभिन्न आकारों और आकार मैं चाहता हूँ गैलरी इसलिए की तरह समान होने की देता है, [] [] [] [] पसंद नहीं [] [] [] [] [] – Beaniie

उपर्युक्त दोनों के संयोजन का उपयोग करें: ऊंचाई को सेट करें (ऑटो चौड़ाई को स्केल रखने के लिए), और अतिरिक्त – hexblot

को फसल करने के लिए माता-पिता को 'ओवरफ़्लो: छुपा' के साथ एक विशिष्ट चौड़ाई तक सीमित करें, यह एक अच्छा है, यह धन्यवाद काम किया! – Beaniie

जैसे कि आपका धारक पर एक पृष्ठभूमि के रूप में यह रखो

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;"> 
&nbsp; 
</div>

इस छवि के किसी भी अतिरिक्त बंद काटना एक 120x120 div के अंदर अपनी छवि को केंद्रित कर देगा

स्रोत

2013-03-28 15:27:39 DickieBoy

आप object-fit css3 संपत्ति, कुछ

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset='utf-8'> 
 
    <style> 
 
    .holder { 
 
     display: inline; 
 
    } 
 
    .holder img { 
 
     max-height: 200px; 
 
     max-width: 200px; 
 
     object-fit: cover; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='twiddla.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
</body> 
 

 
</html>

ऐसा लगता है कि उपयोग कर सकते हैं वास्तव में आपका जवाब नहीं है, हालांकि, इसकी वजह से कंटेनर नहीं फैलता है, लेकिन यह व्यवहार करता है गैलरी और आप img स्टाइल कर सकते हैं।

इस समाधान का एक और दोष अभी भी सीएसएस 3 संपत्ति का खराब समर्थन है।अधिक जानकारी यहां उपलब्ध हैं: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/। jQuery समाधान भी वहां पाया जा सकता है।

स्रोत

2013-07-08 05:23:26

धन्यवाद, अच्छा समाधान। :) – Bibhu

यह ऐसी संपत्ति के साथ उत्तर देने के लिए अजीब है जो केवल ओपेरा एटीएम में समर्थित है ?! http://caniuse.com/object-fit –

मैं आपका पॉइंट देखता हूं, @ सिमॉन, धन्यवाद। मैंने उल्लेख किया कि मुझे कोई जानकारी नहीं है कि संपत्ति हर जगह समर्थित होगी, लेकिन अगर यह नहीं होगा, तो हम इसे _alternatives_ के लिए Google के शुरुआती बिंदु के रूप में उपयोग कर सकते हैं जो इसे प्रतिस्थापित करता है। पोस्ट करने का एक अन्य कारण यह है कि उत्तर कुछ समय तक रहेगा, जबकि ब्राउज़रों को हर दिन बेहतर हो रहा है, इसलिए मैंने भविष्य के करीब भी लक्ष्यीकरण का उत्तर दिया। –

छवियों/समायोज्य लचीला आप इस इस्तेमाल कर सकते हैं बनाने के लिए:

/* fit images to container */ 
.container img { 
    max-width: 100%; 
    height: auto; 
}

स्रोत

2014-04-30 17:08:09 Stanislav

यदि आप जानते हैं SPECT अनुपात आप प्रतिशत के साथ padding-bottom उपयोग कर सकते हैं भिन्नता की साथ के आधार पर hight स्थापित करने के लिए।

<div> 
    <div style="padding-bottom: 33%;"> 
     i have 33% height of my parents width 
    </div> 
</div>

स्रोत

2016-01-13 20:59:57 reco

सीएसएस का उपयोग कर आनुपातिक रूप से छवि आकार बदल रहा है?

उत्तर

संबंधित मुद्दे