2 सवाल: बॉक्स और बक्से में फिट होने के लिए छवियों को प्राप्त करने की कोशिश की जा रही है

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं यह कोड प्राप्त करने के लिए कोशिश कर रहा हूं कि मैं वहां लगभग 90% काम कर रहा हूं, लेकिन स्केलिंग और फ्लेक्सिबल को उत्तरदायी बनाने में कठिनाई हो रही है। जो मैं जानना चाहता हूं वह है:

1) जब मैं लाइन 20 (भी 44, और 68) पर ऑटो में चौड़ाई बदलता हूं तो छवि क्यों गायब हो जाती है? मैं चाहता हूं कि छवि बॉक्स में फिट हो और पाठ ओवरले छवि पर हो।

2) मैं उत्तरदायी होने के लिए छवि बॉक्स कैसे प्राप्त करूं? जब मोबाइल में मैं चाहता हूं कि वे स्टैक्ड हो जाएं और फिर फ्लेक्स करें क्योंकि उन्हें डेस्कटॉप मिलता है इसलिए वे पंक्ति में हैं। तो पंक्ति में स्तंभ। वह काम क्यों नहीं कर रहा है?

बॉक्स को फिट करने के लिए चित्र प्राप्त करने के लिए कोई भी मदद और छवि को ढंकने के लिए पाठ ओवरले और फ्लेक्स और उत्तरदायी होने के लिए सहायक होगा। मैं इस पर काफी समय से अटका हुआ हूं और निश्चित नहीं कि यह काम क्यों नहीं कर रहा है।
कोड पेन लिंक

एचटीएमएल

<div class="opener-wrapper">

  <div id="opener1" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener2" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lore Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener3" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>

</div>

सीएसएस

.opener-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.opener {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#opener1::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener1::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener2::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener2::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener3::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener3::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

.flex-center {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;  */
}

.opener-msg {
  color: #fff;
  text-shadow: #343a40 2px 2px;
  min-width: 100%;
  min-height: 12em;
  position: relative;
  margin: 3% 0;
  text-transform: uppercase;
}

.opener-msg::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: 0;
  min-width: 100%;
  min-height: 12em;
  z-index: -1;
  opacity: 0.4;
  background-color: #343a40;
}

.opener-title,
.opener-subtitle {
  width: 100%;
  display: block;
  text-align: center;
}

.opener-title {
  margin: 3% 0;
}
    
0
  1. ठीक है तो मैंने अपने कोडपेन को अपडेट किया और संपादित किया, तो अब यह काम करता है, लेकिन मैं अभी भी इसे किसी भी विचार को फ्लेक्स करने के लिए नहीं पा सकता हूं?
    2019-05-08 18: 59: 25Z
    2 उत्तर                              2                         
      

    1) जब मैं लाइन 20 (भी 44, और 68) पर ऑटो में चौड़ाई बदलता हूं तो छवि क्यों गायब हो जाती है? मैं चाहता हूं कि छवि बॉक्स में फिट हो और पाठ ओवरले छवि पर हो।

    यह बॉक्स 0600350991100100135062 पर सेट है। बिल्कुल तैनात तत्व उनके मूल कंटेनर (या अगले अपेक्षाकृत स्थित माता-पिता) के सापेक्ष आकार के हैं। उन्हें एक चौड़ाई और ऊंचाई की आवश्यकता होती है।

    अगर आप 0600350991111001010350 पर 0600350991100101035062 सेट करते हैं, और position: absolute पर रंग ओवरले सेट करते हैं?

      

    2) मैं उत्तरदायी होने के लिए छवि बॉक्स कैसे प्राप्त करूं? जब मोबाइल में मैं चाहता हूं कि वे स्टैक्ड हो जाएं और फिर फ्लेक्स करें क्योंकि उन्हें डेस्कटॉप मिलता है इसलिए वे पंक्ति में हैं। तो पंक्ति में स्तंभ। वह काम क्यों नहीं कर रहा है?

    आपको फ्लेक्स कंटेनर पर background-image से #opener1 सेट करने की आवश्यकता है। वर्तमान में #opener1::after पर 0600350991100101035062 सेट नहीं है। यह बक्से को क्षैतिज रूप से प्रवाह करने की अनुमति देगा। इसके अलावा, आपके पास flex-direction पर row पर सेट है। यह सुनिश्चित करेगा कि आपके बॉक्स 100% चौड़ाई लेते हैं - जो आप नहीं चाहते हैं। इस पंक्ति को निकालें, और flex-direction जोड़ें।

    आप क्रिस कॉयर के एक संपूर्ण पर एक नज़र रखना चाहते हैं फ्लेक्सबॉक्स के लिए गाइड अगर आपने अभी तक नहीं किया है!

        
    1
    2019-05-08 15: 12: 58Z
    1. ठीक है तो मैंने अपने कोडपेन को अपडेट किया और संपादित किया, तो अब यह काम करता है, लेकिन मैं अभी भी इसे किसी भी विचार को फ्लेक्स करने के लिए नहीं पा सकता हूं?
      2019-05-08 18: 59: 35Z

      1) .opener-wrapper तत्व की चौड़ाई को ब्राउज़र डिफ़ॉल्ट चौड़ाई पर सेट करता है। इस स्थिति में, ब्राउज़र 0px की चौड़ाई के साथ min-width छद्म तत्व को आरंभीकृत करता है, जिसे गणना शैलियों में यह imgur छवि

      है

      2) पृष्ठ को कैसे देखा जा रहा है, इसके आधार पर तत्वों का आकार बदलने के लिए आपको 100% नियमों की आवश्यकता होगी। वर्तमान में आपके सभी सलामी बल्लेबाजों के पास 0600350991100101035062 और max-width: 33.33%; की width: auto; है। इससे वे अपने कब्जे वाले 100% स्थान का उपयोग करते हैं। यदि आप तत्वों को एक ही पंक्ति में प्रदर्शित करना चाहते हैं, तो आपको उस 100% को विभाजित करना होगा कि आप प्रत्येक पंक्ति में कितने तत्वों को प्रदर्शित करना चाहते हैं। इन तीन तत्वों के मामले के लिए, मैंने निम्नलिखित कार्य किया।

      :before

      इसे फॉलो करने के लिए, मैंने तत्वों की चौड़ाई को 100% तक बदलने के लिए CSS में @media अनुभाग जोड़ा, जब डिस्प्ले 600px से छोटा होता है।

      width

      सभी एक साथ, आपका सीएसएस इस के समान होना चाहिए:

      min-width     
      0
      2019-05-08 15: 53: 03Z
      1. ठीक है तो मैंने अपने कोडपेन को अपडेट किया और संपादित किया, तो अब यह काम करता है, लेकिन मैं अभी भी इसे किसी भी विचार को फ्लेक्स करने के लिए नहीं पा सकता हूं?
        2019-05-08 18: 59: 40Z
      2. आपको अभी भी 100% वर्ग पर
        .opener {
          width: 33%;
          height: 100%;
          min-width: 33%;
          min-height: 100%;
        } 
        
        सेट करने की आवश्यकता है। इसके अलावा, 0600350991100100135035062 को एक ही कक्षा में वस्तुओं को एक दूसरे के बगल में जगह देने की अनुमति देने के लिए 0600350991100100135035062 में बदल दिया जाना चाहिए।
        2019-05-08 22: 14: 27Z
        @media
स्रोत रखा गया यहाँ