कैसे छवियों को लगातार जमा करें

सीएसएस का उपयोग करके छवियों को लगातार जमा करने का सीखा।

कैसे छवियाँ एक-दूसरे के साथ साथ रखें

पहला कदम - HTML जोड़ें:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

कैसे CSS का उपयोग करें फ्लोट स्तम्भ बनाने वाली गुण:

फ्लोट उदाहरण

/* तीन छवि कंटेनर (चार छवि कंटेनर 25% का उपयोग करें, दो छवि कंटेनर 50% का उपयोग करें, इस तरह ही) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* छवि कंटेनर के बाद के फ्लोट को साफ करना */
.row::after {
  content: "";
  clear: both;
  display: table;
}

स्वयं प्रयोग करें

कैसे CSS का उपयोग करें flex स्तम्भ बनाने वाली गुण:

फ्लेक्सबॉक्स उदाहरण

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

स्वयं प्रयोग करें

ध्यान:Flexbox Internet Explorer 10 और अधिक पुरानी संस्करणों का समर्थन नहीं करता। तीन स्तम्भ बनाने के लिए float या flex का उपयोग करना आपकी जानबूझकरी है। लेकिन अगर आप IE10 और नीचे के समर्थन की जरूरत है, तो आपको फ्लोट का उपयोग करना चाहिए।

संकेत:फ्लेक्सबॉक्स लेयआउट मॉड्यूल के बारे में अधिक जानने के लिए हमारे CSS Flexbox शिक्षा。

प्रतिक्रियाशीलता जोड़ें

या फिर, आप एक मीडिया क्वेरी जोड़ सकते हैं, जो एक विशेष स्क्रीन चौड़ाई पर छवियों को स्टैक करे और न एक-दूसरे के साथ साथ रखे।

नीचे दिए गए उदाहरण में छवियाँ 500px या कम चौड़ाई वाले स्क्रीन पर ऊर्ध्व-स्थित स्टैक कर दी जाएंगी:

प्रतिक्रियाशील उदाहरण

/* प्रतिक्रियाशील रूपांतर - तीन स्तम्भों को स्टैक करने के लिए बजाय एक-दूसरे के साथ साथ रखना */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

स्वयं प्रयोग करें

मीडिया क्वेरी के बारे में अधिक जानने के लिए हमारे CSS मीडिया क्वेरी शिक्षा。

संबंधित पृष्ठ

शिक्षा:CSS इमेज

शिक्षा:CSS फ्लोटिंग

शिक्षा:CSS इमेज लाइब्रेरी