क्या किसी छवि को खींचने से रोकने का कोई तरीका है, इसे किसी तरह से क्रॉप करना लेकिन आयाम रखना ..?

img {
  width: 90px;
  height: 120px;
}
<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">
0
DevJoe 15 नवम्बर 2017, 14:14

3 जवाब

यदि आप छवि को निश्चित आयामों के साथ परिभाषित कंटेनर में फिट करना चाहते हैं, तो आप object-fit:cover का उपयोग कर सकते हैं:

div {
  height: 120px;
  width: 90px;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div>
  <img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">
</div>
2
sideroxylon 15 नवम्बर 2017, 14:19
धन्यवाद, मैं इस संपत्ति का उपयोग करने के बारे में सोच रहा था लेकिन यह आईई में काम नहीं कर रहा है, क्या कोई और तरीका है जिससे आप अवगत हैं?
 – 
DevJoe
15 नवम्बर 2017, 14:27
 – 
Jamie Barker
15 नवम्बर 2017, 14:57

इस छवि के ठीक उसी आयाम को रखने के लिए आपको केवल दो आयामों में से एक को सेट करना चाहिए। दूसरे की स्वचालित रूप से गणना की जाएगी:

img {
  width: 90px;
  /*height: 120px;*/
}
<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

आशा है कि मैंने मदद की।

0
Gaspacchio 15 नवम्बर 2017, 14:16
आयाम वही रहना चाहिए
 – 
DevJoe
15 नवम्बर 2017, 14:23

width और height का उपयोग करने के बजाय, max-width और max-height का उपयोग करें।

img {
  max-width:90px;
  max-height:120px;
}

डेमो

0
Suresh Ponnukalai 15 नवम्बर 2017, 14:24
हाँ, लेकिन यह ऊंचाई को छोटा करता है
 – 
DevJoe
15 नवम्बर 2017, 14:25