सीएसएस - केंद्रित केंद्र

मैं सीएसएस में दो सांद्रिक मंडल बनाना चाहता हूं। आंतरिक व्यक्ति की बाहरी चौड़ाई की तुलना में निर्दिष्ट चौड़ाई होती है, उदा। 50%। उन मंडलियों को उत्तरदायी होना चाहिए, वे सभी स्क्रीन के लिए ठीक से स्केल करना चाहिए।सीएसएस - केंद्रित केंद्र

मैं यह कैसे कर सकता हूं? मैं स्थिति का उपयोग नहीं करना पसंद करता हूं: पूर्ण, जावास्क्रिप्ट या jQuery। मुझे लगता है कि यह संभव होना चाहिए।

धन्यवाद!

enter image description here

स्रोत

2013-12-14 user3103099

देखें क्या आप निर्दिष्ट कर सकते हैं कि उन्हें "ठीक से स्केल" कैसे करना चाहिए? वे संबंध में क्या स्केल करेंगे? – Guffa

क्या आपके पास मंडलियों के बारे में कोई प्रतिबंध है, या उस सम्मान में पूर्ण स्वतंत्रता है? (छवि, वास्तव में बड़ी सीमा त्रिज्या के साथ आयत, पृष्ठभूमि छवि के साथ div, आदि) – Josiah

आंतरिक सर्कल की स्थिति पूर्ण होने पर यह आसान है। आप इसका इस्तेमाल क्यों नहीं करेंगे? (मैं स्क्रिप्टिंग का उपयोग नहीं करना चाहता हूं, लेकिन मुझे स्थिति के बारे में कोई तर्क नहीं दिख रहा है ...) – vals

आह ... svg मदद कर सकते हैं? आप यदि आवश्यक हो तो यह तत्वों पर सीएसएस का उपयोग कर सकते हैं, लेकिन मुझे लगता है कि आप कर सकते हैं यह सख्त और सरल:

<!DOCTYPE html > 
<html> 
    <head> 
    <title> Bla! </title> 
    </head> 
    <body> 
     <svg> 
      <circle cx="80" cy="80" r="40" fill='red' stroke-width="20" stroke='black'/ > 
     </svg> 
    </body> 
</html>

स्रोत

2013-12-14 21:23:21

अच्छा प्रवाह का पालन करना चाहिए। सीएसएस ग्राफिक्स के लिए एक बेहतर विकल्प की तरह लगता है। और ब्राउज़र समर्थन बहुत अच्छा लग रहा है –

http://jsfiddle.net/mG3KJ/1/

#outer { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    border-radius: 50%; 
    background: black; 
} 
#inner { 
    width: 50%; 
    height: 50%; 
    background: white; 
    border-radius: 50%; 
    position: relative; 
    top: 25%; 
    left: 25%; 
}

स्रोत

2013-12-14 21:31:00

आईटी उत्तरदायी है, लेकिन यह कभी-कभी एक अंडाकार होता है। इसे हमेशा इस तरह से एक सर्कल बनाएं http://jsfiddle.net/mG3KJ/2/ – vals

बहुत अच्छा है, लेकिन आंतरिक सीएसएस का प्रतिशत सेट करने का कोई आसान तरीका है? अब यह हमेशा 50 है। मुझे एफई की आवश्यकता होगी। 70%, 75%, .. – user3103099

@ user3103099 आपका क्या मतलब है? आप बस प्रतिशत बदल सकते हैं? –

शुद्ध सीएसएस:

#container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#circle { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    border-radius: 50%; 
} 

#small-circle{ 
    margin-top: 25%; 
    margin-left: 25%; 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #e5e5e5; 
    border-radius: 50%; 
}

और एचटीएमएल :

<div id="container"> 
    <div id="circle"> 
     <div id="small-circle"> 
     </div> 
    </div> 
</div>

Demo

स्रोत

2013-12-14 22:28:19

सीएसएस - केंद्रित केंद्र

उत्तर

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