मेरे पास एक शीर्षलेख है जिसमें पृष्ठभूमि छवि है। इस छवि पर मैं कुछ एनिमेशन जोड़ने के लिए सर्कल के आकार के साथ कुछ divs रखना चाहूंगा। समस्या यह है कि एक बार जब व्यू पोर्ट सिकुड़ जाता है, तो निरपेक्ष स्थिति का उपयोग करने पर आकृतियाँ उसी के अनुसार आगे बढ़ेंगी। मैंने इसे vh और vw इकाइयों के साथ आज़माया है, लेकिन आकृतियाँ तब भी चलती रहेंगी, भले ही बैकग्राउंड फ़ोटो बहुत अधिक न बदले। मैं चाहता हूं कि वह div वहां हो जैसे कि वह फोटो का हिस्सा था। क्या यह संभव है? यहां छवि विवरण दर्ज करें

0
Valentin Andrei 3 नवम्बर 2019, 21:24
1
छवि से डिज़ाइन को हटाना बेहतर है, और फिर इससे कोई फर्क नहीं पड़ता कि यह कुछ पिक्सेल बंद है
 – 
Tallboy
3 नवम्बर 2019, 21:27
कुछ गणित का प्रयोग करें। यदि छवि का आकार बदल दिया गया है, तो इस आकार के आधार पर स्थिति घटाएं
 – 
Thanh Trung
3 नवम्बर 2019, 21:40

1 उत्तर

एक बहुत साफ-सुथरी हैक है जो आप मंडलियों (या पूर्ण वर्गों) के लिए कर सकते हैं। एक :after छद्म वर्ग में, आप कह सकते हैं कि पैडिंग-बॉटम: 100% - यह प्रतिशत स्वयं .circle के सापेक्ष है, और इस प्रकार चौड़ाई और ऊंचाई बिल्कुल समान है। सर्कल की चौड़ाई पर प्रतिशत के साथ युग्मित, आप इन्हें कंटेनर के साथ आकार बदल सकते हैं।

आप देखेंगे कि कंटेनर का आकार बदलने से पैरेंट के सापेक्ष सर्कल का आकार और पैरेंट के सापेक्ष स्थिति भी बनी रहती है।

.header {
  position: relative;
  height: 300px;
  background: grey;
}

.circle {
  width: 10%;
  position: absolute;
}

.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  border: 1px solid green;
  border-radius: 100%;
  overflow: hidden;
}

.circle.top-left {
  left: 10%;
  top: 10%;
}

.circle.bottom-right {
  right: 10%;
  bottom: 10%;
}
<div class="header">
  <div class="circle top-left"></div>
  <div class="circle bottom-right"></div>
</div>
0
jas7457 3 नवम्बर 2019, 21:48