बल छवि टैग सही सर्कल होने के लिए

Question

क्या यह संभव है? मैं एक छवि को एक पूर्ण सर्कल बनाना चाहता हूं इससे कोई फर्क नहीं पड़ता कि छवि एक पूर्ण वर्ग नहीं है यानी: 100px x 100px।

.circle { 
border-radius: 50%; 
height: 100px; 
width: 100px; 
} 

कि कोड के साथ

, अगर छवि 200x150 है, img टैग एक अंडाकार के आकार में होगा। क्या मुझे छवि का आकार चाहे कोई सही सर्कल मिल सके?

<img class="circle" src="/link/to/img.jpg" height="80" width="80" /> 

Answer 1

नहीं, आपको छवि को एक div में लपेटने की आवश्यकता है, उस पर गोल करने और किसी भी अतिप्रवाह को छिपाने की आवश्यकता है।

यहां मैंने फ्लेक्सबॉक्स के साथ छवि को भी केंद्रित किया है लेकिन यह एक आवश्यकता नहीं है।

.circle { 
 
border-radius: 50%; 
 
height: 100px; 
 
width: 100px; 
 
overflow: hidden; 
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
}

<div class="circle"> 
 
    <img src="http://www.fillmurray.com/460/300" alt=""> 
 
</div> 
 

 
<h2> Actual Image</h2> 
 

 
    <img src="http://www.fillmurray.com/460/300" alt="">