CSS: मैं पैरेंट हाइट के सापेक्ष इमेज साइज कैसे सेट कर सकता हूं?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि किसी छवि को कैसे फिर से आकार दिया जाए ताकि वह ऊंचाई के लिए चौड़ाई के अनुपात को बनाए रखे, लेकिन जब तक छवि की ऊंचाई युक्त div की ऊंचाई से मेल नहीं खाती, तब तक पुन: आकार मिलता है। मेरे पास ये चित्र हैं जो बहुत बड़े और लंबे (स्क्रीनशॉट) हैं, और मैं उन्हें एक 200px चौड़ाई, 180px ऊंचाई डिव डिस्प्ले के लिए और छवियों को मैन्युअल रूप से पुन: आकार देने के बिना रखना चाहता हूं। इसे अच्छा दिखाने के लिए, छवि के किनारों को ओवरफ्लो करने की आवश्यकता होती है और युक्त div के साथ छिपा हुआ होता है। अभी तक मेरे पास इतना ही है:

http://jsfiddle.net/f9krj/2/

एचटीएमएल

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

सीएसएस

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

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

Comments

क्या आपने सीएसएस पृष्ठभूमि छवि और सेटिंग का उपयोग करने की कोशिश की है background-size: cover;?

— CP510

के max-height:100%;बजाय का उपयोग करें width, बेला

— पैट्रिक इवांस

@ CP510 फिर आप सही हैं। मुझे इसका पता लगाना चाहिए था! jsfiddle.net/f9krj/4

— जॉन मैकफर्सन

संभावित डुप्लीकेट डुप्लीकेट मेक इन इमेज चौड़ाई 100% पैरेंट डिव, लेकिन अपनी खुद की

— चैड़ाई

Answer 1

मूल उत्तर:

यदि आप CSS3 के विकल्प के लिए तैयार हैं, तो आप css3 अनुवाद संपत्ति का उपयोग कर सकते हैं। जो भी बड़ा है, उसके आधार पर आकार बदलें। यदि आपकी ऊंचाई बड़ी है और चौड़ाई कंटेनर से छोटी है, तो चौड़ाई 100% तक हो जाएगी और दोनों तरफ से ऊँचाई छाँट दी जाएगी। वही बड़ी चौड़ाई के लिए भी जाता है।

आपकी आवश्यकता, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

और सीएसएस:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

देखा! कार्य: http://jsfiddle.net/shekhardesigner/aYrhG/

व्याख्या

DIV को relativeस्थिति पर सेट किया गया है । इसका मतलब यह है कि सभी बच्चे तत्व शुरुआती निर्देशांक (मूल) प्राप्त करेंगे, जहां से यह DIV शुरू होता है।

छवि को एक ब्लॉक तत्व के रूप में सेट किया गया है, min-width/heightदोनों को 100% सेट करने का मतलब है कि इसके आकार का कोई फर्क नहीं पड़ता छवि का आकार कम से कम 100% है। minक्या चाबी है। यदि मिनट की ऊंचाई से, छवि की ऊंचाई माता-पिता की ऊंचाई से अधिक है, तो कोई समस्या नहीं है। यह तब लगेगा जब न्यूनतम चौड़ाई और 100% माता-पिता होने के लिए न्यूनतम ऊंचाई निर्धारित करने का प्रयास करें। दोनों इसके विपरीत जाते हैं। यह सुनिश्चित करता है कि div के आसपास कोई अंतराल नहीं है लेकिन छवि हमेशा थोड़ी बड़ी होती है और इसके द्वारा छंटनी हो जाती हैoverflow:hidden;

अब image, यह और के absoluteसाथ एक स्थिति पर सेट है । इसका मतलब है कि छवि को ऊपर से 50% धक्का दें और सुनिश्चित करें कि मूल DIV से लिया गया है। पैरेंट से लेफ्ट / टॉप यूनिट को मापा जाता है।left:50%top:50%

जादू का पल:

transform: translate(-50%, -50%);

अब, translateCSS3 की transformसंपत्ति का यह कार्य एक प्रश्न में एक तत्व को स्थानांतरित / पुन: उत्पन्न करता है। यह संपत्ति लागू तत्व से संबंधित है इसलिए मान (x, y) या (-50%, -50%) का अर्थ है छवि को नकारात्मक छवि के 50% द्वारा छोड़ दिया गया और छवि आकार के 50% से नकारात्मक शीर्ष पर जाना ।

उदाहरण के लिए। यदि छवि का आकार 200px × 150px था, transform:translate(-50%, -50%)तो अनुवाद (-100px, -75px) की गणना की जाएगी। % इकाई तब मदद करती है जब हमारे पास विभिन्न आकार की छवि होती है।

यह छवि और मूल DIV के केंद्रक का पता लगाने और उनसे मिलान करने के लिए केवल एक मुश्किल तरीका है।

समझाने के लिए बहुत समय लगने के लिए क्षमा याचना!

अधिक पढ़ने के लिए संसाधन:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Comments

यह काम करता है लेकिन मैं वास्तव में इसे प्राप्त नहीं करता हूं। किसी को समझाने के लिए मन?

— जेकॉब

यह सीएसएस टोना अपनी बेहतरीन पर है।

— लिज

चूँकि इसे अभी तक समझाया जाना बाकी है: क्या कोई इसे स्पष्ट कर सकता है? जवाब को संपादित करने के लिए स्वतंत्र महसूस करें।

— निधि मोनिका का मुकदमा

यह आकार बदलने के बजाय छवि को काट देता है।

— PiyaModi

Answer 2

अपना कोड बदलें:

a.image_container img {
    width: 100%;
}

इसके लिए:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Comments

यह अचूक उपाय है। धन्यवाद! यह छवि को काटने के बजाय एक मूल तत्व के अनुसार छवि की ऊंचाई और चौड़ाई निर्धारित करता है। एक बार फिर धन्यवाद!

— पियामोदी

Answer 3

max-widthइस तरह सीएसएस की संपत्ति का उपयोग करें :

img{
  max-width:100%;
}

Answer 4

यदि आप उत्तर के शेखर के। शर्मा को लेते हैं , और यह लगभग काम करता है, तो आपको इस height: 1px;या इस width: 1px;काम के लिए भी जोड़ना होगा।

Answer 5

आप इसके लिए फ्लेक्स बॉक्स का उपयोग कर सकते हैं .. यह आपकी समस्या को हल करेगा

.image-parent 
{
     height:33px; 
     display:flex; 
}