सीएसएस का आकार बदला जा छवियाँ, गठन

Question

रखने मैं के रूप में यहाँ देखा, छवियों का एक गठन किया है। "दूसरा पैनल" मुख्य रैपर है, जिसमें इमारत की पृष्ठभूमि छवि है। प्रत्येक "हीरा" -श्रेषित छवि सीएसएस का उपयोग करके, पिक्सेल मानों के साथ पूरी तरह से स्थित है।

<!-- Second panel --> 
    <div id="second-panel" class="parallax-wrapper"> 
     <div id="second-panel-diamonds"> 
      <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" /> 
      <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" /> 
      <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" /> 
      <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" /> 
     </div> 
     <div class="parallax-panel"> 
      ...(not relevant)... 
     </div> 
    </div> 

सीएसएस:

#second-panel-diamonds{ 
    position: absolute; 
    left: 1%; 
    top: -5px; 
} 
#second-panel .second-panel-diamond{ 
    position: absolute; 
    /* width: 22%; */ 
    width: auto; 
    height: auto; 
    max-width: 350px; 
} 
.second-panel-diamond:first-child{ 
    top: 250px; 
    left: 90px; 
} 
.second-panel-diamond:nth-child(2){ 
    top: 80px; 
    left: 260px; 
} 
.second-panel-diamond:last-child{ 
    left: 337px; 
    top: 337px; 
} 

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

क्या छवियों को स्केल करते समय इस गठन को बनाए रखने का कोई तरीका है, या क्या मुझे इसे छोटी स्क्रीन के लिए फिर से डिज़ाइन करना होगा?

Answer 1

समस्या को हल करने का सबसे आसान तरीका सभी छवियों को एक पीएनजी ग्राफ़िक में विलय करना होगा और फिर इसकी चौड़ाई और ऊंचाई को प्रतिशत मानों के रूप में सेट करना होगा। क्या आपको छवियों को अलग होने की आवश्यकता है?

Answer 2

हां, सीएसएस @media प्रश्नों का उपयोग कर। तुम बस छवियों प्रदर्शन के आकार को कम करने की जरूरत है विशिष्ट स्क्रीन आकार (मत भूलना बाद में प्रत्येक छवि स्थिति बदलने के लिए) के लिए (आप auto का उपयोग नहीं करने के लिए, यदि आवश्यक हो तो, होगा calc(auto - px)):

@media screen and (max-width: 600px) { 
    #second-panel .second-panel-diamond { 
     position: absolute; 
     width: 50px; 
     height: auto; 
    } 
} 

@media screen and (min-width: 601px) { 
    #second-panel .second-panel-diamond { 
     position: absolute; 
     width: 100px; 
     height: auto; 
    } 
}