flexbox - पूरी ऊंचाई के साथ क्षैतिज घटक छवि

मैं प्राप्त करने के लिए क्या flexbox साथ एक बहुत ही आसान काम नहीं हो रहा है की कोशिश, लेकिन घंटों के बाद, मैं असफल ...flexbox - पूरी ऊंचाई के साथ क्षैतिज घटक छवि

मैं सिर्फ एक उत्तरदायी क्षैतिज बनाना चाहते हैं चुकता के साथ घटक पर एक छवि जो हमेशा 100% ऊंचाई और कुछ लचीली चौड़ाई दाईं ओर पर पाठ हो।

आसान होना चाहिए, लेकिन छवि कभी नहीं सबसे अच्छा मामले में ओवरलैपिंग बंद हो जाता है ...

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

स्रोत

2017-08-15 Yago

-2

तुम सिर्फ .card-img को फ्लेक्स संपत्ति जोड़ने की जरूरत है

आप यहां फ्लेक्स संपत्ति के बारे में अधिक जान सकते हैं: https://www.w3schools.com/cssref/css3_pr_flex.asp

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
    display: flex; //just add this line 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

स्रोत

2017-08-15 08:51:07 Miguel

सीधे छवि अभिभावक पर 'प्रदर्शन: फ्लेक्स; 'जोड़ें। यह लगभग किसी भी मामले में अनुपात तोड़ देगा। – Yago

छवि कंटेनर के लिए न्यूनतम चौड़ाई का उपयोग करना।

सही div की height निर्भर पर यह witdh है:

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
    min-width: 130px; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 0 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

स्रोत

2017-08-15 08:54:31 Gerard

लेकिन आप घटक के उत्तरदायी पहलू को खो देंगे ... – Yago

आपके मामले में, इसे बनाने के लिए सही div छवि क्योंकि के साथ एक ही ऊंचाई है impossiple है। माता-पिता div की वजह से width तय किया गया है, इसलिए दाएं div के width बाएं div के width पर निर्भर करते हैं। बाएं div width छवि height पर निर्भर करता है। तो जब आप छवि height बदलते हैं, तो सही div height भी बदल जाता है। अब, मुझे लगता है कि सबसे अच्छा तरीका छवि को fixed आकार दे रहा है।

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 130px; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

स्रोत

2017-08-15 09:06:13 Duannx

.card-grid{ 
 
    display: grid; 
 
    grid-template-columns: 200px auto; 
 
    grid-template-rows: 200px; 
 
    grid-gap: 0.5em; 
 
} 
 
.card-grid-img img{ 
 
    max-width: 200px; 
 
    height: 100%; 
 
    display: block; 
 
    width: auto; 
 
} 
 
.card-grid-body{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="card-grid"> 
 
    <div class="card-grid-img"> 
 
    <img src="http://www.salavaux.ch/222/5_sq.jpg" alt="Card image"> 
 
    </div> 
 
    <div class="card-grid-body"> 
 
    <h4 class="card-grid-title">Card title</h4> 
 
    <p class="card-grid-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit. Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

ग्रिड का उपयोग करके आप तो ऊंचाई प्रथम स्तंभ तत्वों पर एक बाधा जोड़ सकते हैं।

स्रोत

2017-08-15 09:32:01 zufrieden

flexbox - पूरी ऊंचाई के साथ क्षैतिज घटक छवि

उत्तर

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