उत्तरदायी परिपत्र छवियाँ

Question

मैं वर्तमान में अपने लिए गतिशील स्टाइल शीट बनाने पर काम कर रहा हूं कि मैं भविष्य में उपयोग करूंगा, और इसलिए मैं इसे गतिशील और कठोर कोडित नहीं करना चाहता हूं।

मैं एक छवि वर्ग है:

.image-round{ 
    border-radius: 50%; 
} 

इस वर्ग के सभी वर्ग छवियों के लिए अच्छी तरह से काम करता है, लेकिन जब मैं आयताकार छवियां कोशिश, मैं एक अंडाकार मिलता है।

मैंने jQuery का उपयोग करके इस पर घूमने की कोशिश की, छवि को एक कंटेनर में लपेटकर, मैंने ओवरफ्लो छुपाया है और इसकी ऊंचाई और चौड़ाई को छवि की ऊंचाई के बराबर सेट करने के लिए सेट किया है। इसने समस्या हल की, हालांकि अब मुझे उत्तरदायी मुद्दों का सामना करना पड़ रहा है।

जब मैं खिड़की को स्केल करने की कोशिश करता हूं, तो छवि squished हो जाती है।

अब मुझे आश्चर्य है कि इस समस्या को पूरी तरह गतिशील रूप से हल करने का कोई समाधान है, बिना किसी कठोर कोडिंग के, लैंडस्केप के साथ-साथ पोर्ट्रेट राउंड में छवियां बनाना।

मैं वास्तव में खिड़की के आकार पर छवियों के आकार की जांच करने से बचना चाहता हूं, और उसके बाद कंटेनर आकार को समायोजित करना चाहता हूं - क्योंकि मुझे पूरा यकीन है कि यह बहुत अधिक प्रदर्शन करेगा।

यह पृष्ठभूमि छवि का उपयोग करने का विकल्प भी नहीं है।

Answer 1

आप सभी छवियों दौर एक div में छवियों लपेटकर द्वारा (कई तकनीकों एक div see here के पक्ष अनुपात बनाए रखने के लिए के लिए) बना सकते हैं और

• इसके अनुपात बनाए रखने के वर्ग होने के लिए
• रैपर पर सीमा-त्रिज्या और overflow:hidden; लागू करें।

यह छवियों को अंडाकार प्रदर्शित करने से रोक देगा।

फिर यह समस्या प्रत्येक छवि पहलू अनुपात, परिदृश्य और चित्र को संभालने में सक्षम है, इसलिए वे कंटेनर केंद्रित और "कवर" हैं। उसके लिए आपको object-fill property इस तरह उपयोग कर सकते हैं:

div{ 
 
    position:relative; 
 
    width:20%; 
 
    padding-bottom:20%; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    object-fit: cover; 
 
    width:100%;height:100%; 
 
}

<div><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> 
 
<div><img src="http://i.imgur.com/HDssntn.jpg" /></div>

दोष यह है कि IE doesn't support object-fill है। तो तुम एक वापस आने की जरूरत है दो मामलों को संभालने के लिए:

• परिदृश्य छवियों ऊंचाई से छवि के आकार को सीमित
• चित्र छवियों चौड़ाई

div{ 
 
    position:relative; 
 
    width:20%; 
 
    padding-bottom:20%; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    margin:auto; 
 
} 
 
.landscape img{ 
 
    height:100%; 
 
    left:-100%; right:-100%; 
 
} 
 
.portrait img{ 
 
    width:100%; 
 
    top:-100%; bottom:-100%; 
 
}

<div class="landscape"><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> 
 
<div class="portrait"><img src="http://i.imgur.com/HDssntn.jpg" /></div>

से छवि के आकार को सीमित

इस कॉन्फ़िगरेशन में, आपको परिदृश्य या चित्र छवियों की पहचान करने और उन्हें तदनुसार शैली बनाने के लिए जेएस की आवश्यकता होगी।