आनुपातिक रखते हुए मैं एक छवि के साथ एक div कैसे भर सकता हूं?

Question

मुझे यह धागा मिला - छवि के पहलू-अनुपात को बनाए रखते हुए आप एक <div> भरने के लिए एक छवि को कैसे बढ़ाते हैं? - यह पूरी तरह से वह चीज नहीं है जो मुझे चाहिए।

मेरे पास एक निश्चित आकार और इसके अंदर एक छवि के साथ एक div है। मैं हमेशा छवि के साथ div को भरना चाहता हूं , भले ही छवि परिदृश्य या चित्र हो। और इससे कोई फर्क नहीं पड़ता कि छवि कट-ऑफ है (डिव में ही ओवरफ्लो छिपा हुआ है)।

तो अगर छवि चित्र है मैं चाहता हूँ widthहोने के लिए 100%और height:autoतो यह अनुपात में रहता है। मैं चाहते हैं छवि परिदृश्य है heightहोना करने के लिए 100%और width to beauto`। सही लगता है?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

चूंकि मुझे नहीं पता है कि मुझे यह कैसे करना है, मैंने बस एक त्वरित छवि बनाई है जिसका मेरा मतलब है। मैं इसका ठीक से वर्णन भी नहीं कर सकता।

इसलिए, मुझे लगता है कि मैं यह पूछने वाला पहला व्यक्ति नहीं हूं। हालाँकि मैं वास्तव में इसका कोई हल नहीं ढूंढ सका। शायद ऐसा करने का कुछ नया CSS3 तरीका है - मैं फ्लेक्स-बॉक्स के बारे में सोच रहा हूं। कोई उपाय? शायद यह भी आसान है कि मैं यह होने की उम्मीद करूं?

Comments

जब आप अभी भी जावास्क्रिप्ट के साथ आसानी से कर सकते हैं तो आप css3 का उपयोग क्यों करना चाहते हैं?

— जास माटी के

अनकहा लेकिन आप न्यूनतम-ऊंचाई और न्यूनतम-चौड़ाई को 100% करने की कोशिश कर सकते हैं? कम से कम बॉक्स को भरना चाहिए और इसे अनुपात में रखना चाहिए

— क्रिसबुलमर

Answer 1

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

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

यहाँ JSFiddle

मैंने IE9, Chrome 31 और ओपेरा 18 में इसका सफल परीक्षण किया। लेकिन अन्य ब्राउज़रों का परीक्षण नहीं किया गया। हमेशा की तरह आपको अपनी विशेष समर्थन आवश्यकताओं पर विचार करना चाहिए।

Comments

IE9 में छवि इस विधि के साथ लंबवत या क्षैतिज रूप से केंद्रित नहीं है, यह शीर्ष और बाईं ओर संरेखित है। i59.tinypic.com/ouo77s.png

— माइक

यह iPad पर एक मुद्दा है, ऐसा प्रतीत होता है कि सफारी छवि को अपनी ऊंचाई के 100% तक फैलाती है, लेकिन न्यूनतम-चौड़ाई की संपत्ति को बरकरार नहीं रखती है।

— सीन

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

— जॉनक्ल

फिट होने के लिए एक बड़ी छवि को छोटा करने के लिए, मैंने निम्नलिखित चित्र का उपयोग किया:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }

— पीटर जी।

सुपर हिरो! : डी

— गैरिस एम सुरो

Answer 2

थोड़ी देर हो चुकी है लेकिन मुझे बस एक ही समस्या थी और अंत में इसे एक अन्य स्टैकओवरफ़्लो पोस्ट ( https://stackoverflow.com/a/29103071 ) की मदद से हल किया ।

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

आशा है कि यह अभी भी किसी की मदद करता है।

पीएस: इसके अलावा अधिकतम ऊंचाई , अधिकतम चौड़ाई , न्यूनतम चौड़ाई और न्यूनतम ऊंचाई सीएसएस गुणों के साथ मिलकर काम करता है । कंटेनर या पूरे ब्राउज़र विंडो को भरने के लिए 100% या 100vh / 100vw जैसी लैंथ इकाइयों का उपयोग करने के साथ यह विशिष्ट रूप से आसान है।

Comments

क्या यह एक क्रॉसब्रोसर समाधान है?

— कैंडलजैक

ऑब्जेक्ट-फिट: कवर; बहुत अच्छा काम करता है! ब्राउज़र जानकारी (IE में काम नहीं करता है): css-tricks.com/almanac/properties/o/object-fit Fallback solution for IE: medium.com/@primozcigler/… MS इसे कार्यान्वित करने पर काम कर रहा है: डेवलपर

— काह

मुझे लगता है कि object-positionइस वर्ग के लिए एक नियम जोड़ना यहाँ मददगार होगा। बस एक साइड नोट।

— ताहा पाक्सू

Answer 3

एक पुराना सवाल है लेकिन एक अद्यतन के योग्य है क्योंकि अब एक रास्ता है।

सही सीएसएस आधारित उत्तर का उपयोग करना है object-fit: cover, जो काम करता है background-size: cover। स्थिति को ध्यान में रखते हुए object-positionविशेषता द्वारा ध्यान दिया जाएगा, जो केंद्रित करने के लिए चूक है।

लेकिन किसी भी IE / एज ब्राउज़र या Android <4.4.4 में इसके लिए कोई समर्थन नहीं है। इसके अलावा, object-positionसफारी, आईओएस या ओएसएक्स द्वारा समर्थित नहीं है। पॉलीफ़िल मौजूद हैं, ऑब्जेक्ट-फिट-छवियां सबसे अच्छा समर्थन देती हैं।

संपत्ति कैसे काम करती है, इस बारे में अधिक जानकारी के लिए, स्पष्टीकरण और डेमो के लिए सीएसएस ट्रिक्स लेखobject-fit देखें ।

Answer 4

यह करना चाहिए:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Comments

मेरे लिए बहुत अच्छी तरह से काम करता है, मेरे मामले में मुझे केवल स्थिति जोड़ने की आवश्यकता है: पूर्ण और शीर्ष: 0, और कुछ z- इंडेक्स के रूप में अच्छी तरह से

— byroncorrales

Answer 5

नीचे दिए गए सभी उत्तरों में निश्चित चौड़ाई और ऊंचाई है, जो समाधान को "उत्तरदायी नहीं" बनाती है।

परिणाम प्राप्त करने के लिए, लेकिन मेरे द्वारा उपयोग की जाने वाली छवि उत्तरदायी रखें

1. अंदर कंटेनर वांछित अनुपात के साथ एक पारदर्शी GIF छवि रखते हैं
2. उस छवि के साथ एक छवि टैग इनलाइन css पृष्ठभूमि दें, जिसे आप आकार बदलना चाहते हैं और क्रॉप करना चाहते हैं

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Comments

मैंने अपनी संपूर्ण डिज़ाइन पोर्टफोलियो कंपनी की वेबसाइट के लिए पृष्ठभूमि-छवि का उपयोग किया ताकि मैं पृष्ठभूमि-आकार: कवर कर सकूं। अब मेरी इमेज SEO में गड़बड़ है क्योंकि बैकग्राउंड इमेज Google द्वारा मान्यता प्राप्त नहीं हैं। काश मैंने इसे दूसरे तरीके से कोड किया होता।

— एलेक्स बैनमैन

Answer 6

आप सीएसएस फ्लेक्स गुणों का उपयोग करके इसे प्राप्त कर सकते हैं। कृपया नीचे कोड देखें

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Comments

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

— चिवड़ा

Answer 7

background-size: coverके साथ संयोजन के रूप में (IE9 +) का उपयोग करने पर विचार करें background-image। IE8- लिए, वहाँ एक है polyfill ।

Comments

क्या इसके लिए पृष्ठभूमि-यूआरएल की आवश्यकता नहीं है? क्या आप अधिक विस्तृत कर सकते हैं? क्या यह प्रश्न में बताए अनुसार <img src = "" /> के साथ काम कर सकता है?

— हरसिमरनब

@harsimranb बेशक, निर्दिष्ट के background-sizeसाथ पूरी तरह से समझ में आता background-imageहै (मैं तदनुसार अपना जवाब अद्यतन किया है)। यह IMGतत्वों पर लागू नहीं होता है ।

— मराट तानलिन

यह सबसे अच्छा जवाब है। यह सरल है और इसमें अच्छा ब्राउज़र समर्थन है। अन्य सभी समाधान या तो बहुत जटिल हैं या IE (9) में काम नहीं कर रहे हैं।

— जोस्ट्स

Answer 8

इसे इस्तेमाल करे:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

उम्मीद है की यह मदद करेगा

Answer 9

इसे प्राप्त करने के लिए आप div का उपयोग कर सकते हैं। बिना img टैग :) उम्मीद है कि यह मदद करता है।

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

Answer 10

जिस तरह से मैंने वर्णित "सबसे अच्छा मामला" परिदृश्य हासिल किया, वह छवि को पृष्ठभूमि के रूप में डाल रहा था:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Answer 11

यहाँ IE का उपयोग करने के लिए समर्थन के साथ एक जवाब है object-fit ताकि आप अनुपात खो न सकें

एक सरल जेएस स्निपेट का उपयोग करके यह पता लगाने के लिए कि object-fitक्या समर्थित है और फिर imgए के लिए प्रतिस्थापित करेंsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

---

नोट: वहाँ भी कुछ object-fitpolyfills वहाँ है कि कर देगाobject-fit काम ।

कुछ उदाहरण निम्नलिखित हैं:

• वस्तु फिट-छवियों
• constancecchen / ऑब्जेक्ट-फिट-पॉलीफ़िल
• सीएसएस ऑब्जेक्ट-फिट संपत्ति के लिए पॉलीफ़िल

Answer 12

यहाँ आप मेरे काम करने का उदाहरण है। मैंने एक चाल का उपयोग किया है जो पृष्ठभूमि के आकार के साथ डिव कंटेनर की पृष्ठभूमि के रूप में छवि सेट कर रहा है: कवर और पृष्ठभूमि-स्थिति: केंद्र केंद्र

मैंने छवि को चौड़ाई के साथ रखा है: 100% और अस्पष्टता: 0 इसे अदृश्य बना रही है। ध्यान दें कि मैं अपनी छवि केवल इसलिए दिखा रहा हूं क्योंकि मुझे चाइल्ड क्लिक ईवेंट पर कॉल करने का विशेष शौक है।

कृपया ध्यान दें कि माना जाता है कि मैं कोणीय का उपयोग कर रहा हूं यह पूरी तरह अप्रासंगिक है।

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

परिणाम वह है जिसे आप सभी मामलों में इष्टतम के रूप में परिभाषित करते हैं

Answer 13

सीएसएस object-fit: coverऔर object-position: left centerसंपत्ति मूल्य अब इस मुद्दे को संबोधित करते हैं।

Answer 14

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

<div class="image-wrapper">
  <img src="">
</div>

Answer 15

बस छवि की ऊंचाई तय करें और चौड़ाई = ऑटो प्रदान करें

img{
    height: 95vh;
    width: auto;
}