मैं एक 'div' कंटेनर को फिट करने के लिए एक छवि का आकार कैसे बदल सकता हूँ?

Question

आप एक बड़ी छवि को ऑटो-आकार कैसे देते हैं ताकि वह अपनी चौड़ाई को बनाए रखते हुए एक छोटी चौड़ाई के डिव कंटेनर में फिट हो जाए: ऊंचाई अनुपात?

---

उदाहरण: stackoverflow.com - जब एक चित्र संपादक पैनल पर डाला जाता है और पृष्ठ पर फिट होने के लिए छवि बहुत बड़ी होती है, तो छवि स्वचालित रूप से आकार बदल जाती है।

Comments

कंटेनर को फिट करने के लिए छवि को आकार देने के लिए कुछ दिलचस्प पुस्तकालय: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin

— Frosty Z

@ केविन के जवाब के अलावा ... आप इमेजबॉस जैसी सेवाओं का उपयोग अपनी छवियों को आपके इच्छित आकार के साथ बनाने के लिए भी कर सकते हैं। कंटेनर पर छवि को पकड़ना महान है, लेकिन जिम्मेदारी से छवियों की सेवा करना एक शानदार तरीका है।

— इगोर एस्कोबार

— विश्वसनीय

@jolumg काफी नहीं; जबकि कुछ समाधानों में बहुत अधिक ओवरलैप है, ऐसे कई समाधान भी हैं जो विनिमेय नहीं हैं, क्योंकि एक यह पूछ रहा है कि किसी छवि को कैसे स्केल किया जाए, जबकि यह एक छवि को स्केल करने के लिए कह रहा है।

— टाइलर

001 - यह आपके प्रश्न का उत्तर है जिसे मैंने देखा था, उससे पहले बंद कर दिया गया था। माता-पिता घटक से एक बच्चे के घटक को कैसे कॉल करें। मैंने यह बताते हुए एक ब्लॉग पोस्ट लिखी कि घटकों को इंटरफेस का उपयोग करके कैसे संवाद किया जाए: datajugglerblazor.blogspot.com/2020/01/…

— डेटा बाजीगर

Answer 1

छवि टैग पर स्पष्ट चौड़ाई या ऊँचाई लागू न करें। इसके बजाय, इसे दें:

max-width:100%;
max-height:100%;

इसके अलावा, height: auto;यदि आप केवल एक चौड़ाई निर्दिष्ट करना चाहते हैं।

उदाहरण: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Comments

यह ऊंचाई और चौड़ाई दोनों को मापेगा नहीं।

— नील

ऊंचाई: ऑटो; यदि आप केवल एक चौड़ाई निर्दिष्ट करना चाहते हैं

— Roi

क्या होगा अगर छवि बहुत छोटी है?

— स्कॉट रिपी

@ सेट रिपी - यदि छवि कंटेनर से छोटी है, तो यह परिवर्तित नहीं होगी क्योंकि उपयोग किए गए नियम अधिकतम-चौड़ाई और अधिकतम-ऊंचाई हैं।

— असली सपने

एक संलग्न <a>टैग के साथ, छवि का आकार परिवर्तन नहीं हुआ। नियमों को ए-टैग पर लागू करने से यह समस्या हल हो गई।

— SPRBRN

Answer 2

वस्तु फिट

यह पता चला है कि ऐसा करने का एक और तरीका है।

<img style='height: 100%; width: 100%; object-fit: contain'/>

काम करेंगे। यह सीएसएस 3 सामान है।

फिडल: http://jsfiddle.net/mbHB4/7364/

Comments

यह छवि को बड़े आयाम को कंटेनर के भीतर पूरी तरह से फिट करने के लिए स्केल करेगा, इसलिए छोटे आयाम इसे पूरी तरह से कवर नहीं कर सकते हैं। इसके बजाय बड़े आयाम को क्रॉप करने के लिए, उपयोग करेंobject-fit: cover

— गेब्रियल ग्रांट

मेरे लिए काम किया - @ केविनडी के समाधान की तुलना में - इससे किनारे के मामलों में अनुपात नहीं बदला है। चीयर्स!

— बरनबास केस्क

पूरी तरह से समर्थित होने पर महान होगा। एटीएम, न तो IE और न ही बढ़त दुर्भाग्य से समर्थन करते हैं।

— चश्मा

यदि आप अधिकतम-चौड़ाई और अधिकतम-ऊँचाई सेट करना चाहते हैं, तो आप ऐसा कर सकते हैं। अच्छी तरह से काम ।

— संदीप सूबेदारि

ऐसा लगता है कि खिचड़ी भाषा का उपयोग IE11 और किनारे 14/15 के

— mcorbe

Answer 3

वर्तमान में नियतात्मक तरीके से इसे सही तरीके से करने का कोई तरीका नहीं है, जेपीईजी या पीएनजी फाइलों जैसे निश्चित आकार की छवियां।

आनुपातिक रूप से एक छवि का आकार बदलने के लिए, आपको "100%" या तो ऊंचाई या चौड़ाई निर्धारित करनी होगी , लेकिन दोनों नहीं।यदि आप दोनों को "100%" पर सेट करते हैं, तो आपकी छवि खिंच जाएगी।

चुनना कि ऊंचाई या चौड़ाई करना आपकी छवि और कंटेनर आयामों पर निर्भर करता है:

1. यदि आपकी छवि और कंटेनर दोनों "पोर्ट्रेट शेप्ड" या दोनों "लैंडस्केप शेप्ड" हैं (वे जितने लम्बे हैं, या उससे अधिक चौड़े हैं, क्रमशः), तो यह मायने नहीं रखता कि कौन सी ऊँचाई या चौड़ाई "% 100" है ।
2. यदि आपकी छवि पोर्ट्रेट है, और आपका कंटेनर लैंडस्केप है, तो आपको height="100%"इमेज पर सेट होना चाहिए ।
3. यदि आपकी छवि परिदृश्य है, और आपका कंटेनर पोर्ट्रेट है, तो आपको width="100%"छवि पर सेट होना चाहिए ।

यदि आपकी छवि एक एसवीजी है, जो एक चर-आकार की वेक्टर छवि प्रारूप है, तो आपके पास कंटेनर को स्वचालित रूप से फिट करने के लिए विस्तार हो सकता है।

आपको केवल यह सुनिश्चित करना है कि एसवीजी फ़ाइल में <svg>टैग में इन गुणों में से कोई भी सेट नहीं है :

height
width
viewbox

एसवीजी फ़ाइल को निर्यात करते समय अधिकांश वेक्टर ड्राइंग प्रोग्राम इन गुणों को सेट करेंगे, इसलिए आपको अपने फ़ाइल को हर बार निर्यात करते समय मैन्युअल रूप से संपादित करना होगा, या इसे करने के लिए एक स्क्रिप्ट लिखना होगा।

Comments

क्या यह सिर्फ मेरी है या इस पोस्ट में कई गलतियाँ हैं? "" चित्र के आकार का 'या दोनों' लैंडस्केप शेप '(वे जितने लंबे हैं, और जितना लंबा है, उससे अधिक लंबा है, क्रमशः) ... "क्या आपके" आदरणीय "को चारों ओर नहीं घुमाया जाना चाहिए? और आपके बुलेट अंक 2. और 3. में, वे दोनों कहते हैं "आपको छवि पर चौड़ाई =" 100% "सेट करना होगा"। मैं आपको कॉपी-पेस्ट करने का अनुमान लगा रहा हूं और उनमें से एक को "चौड़ाई" के बजाय "ऊंचाई" में बदलना भूल गया हूं।

— ब्यूटिक बटुक

बस इसे ठीक कर दिया। एक गलत और एक सही होने के बजाय 2 और 3 अब गलत या दोनों सही हो सकते हैं। मुझे याद नहीं है कि सही उत्तर क्या है। ;)

— नील

"वर्तमान में नियतात्मक तरीके से इसे सही तरीके से करने का कोई तरीका नहीं है, जेपीईजी और पीएनजी फाइलों जैसे निश्चित आकार की छवियां।" यह सिर्फ गलत लगता है। @ Thorn007 का जवाब इस तरह से प्रदान करता है, और मैंने इसे खुद इस्तेमाल किया है - stackoverflow.com/questions/12259736/…

— Dan Dascalescu

@DanDascalescu Thorn007 का उत्तर छवि का विस्तार नहीं करता है यदि यह कंटेनर से छोटा है। आजकल सबसे अच्छा समाधान पृष्ठभूमि छवि और सेट के साथ एक तत्व का उपयोग करना है background-size: contain।

— केविन बॉर्डर

"आनुपातिक रूप से एक छवि का आकार बदलने के लिए, आपको" 100% "या तो ऊंचाई या चौड़ाई निर्धारित करनी होगी, लेकिन दोनों नहीं।" <यह वही था जिसने मेरी मदद की। धन्यवाद

— अलेक्जेंडर सैंटोस

Answer 4

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

HTML सामग्री:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

सीएसएस सामग्री:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

JQuery का हिस्सा:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Comments

सीएसएस ठीक वैसे ही काम करता है जैसा मैं चाहता हूं, और मैंने

— bkwdesign

Answer 5

इसे सरल बनाओ!

कंटेनर को एक निश्चित जगह दें heightऔर फिर उसके imgअंदर टैग के लिए , सेट करें widthऔर max-height।

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

अंतर यह है कि आपने width100% निर्धारित किया है, नहीं max-width।

Comments

यदि Google क्रोम छवि बहुत लंबा है और व्यूपोर्ट छोटा है, तो इससे छवि अनुपात बदल जाता है।

— मिकको रेंटलीनन

Answer 6

एक सुंदर हैक।

आपके पास छवि को उत्तरदायी बनाने के दो तरीके हैं।

1. जब कोई इमेज बैकग्राउंड इमेज होती है।

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

इसे यहां चलाएं

---

लेकिन एक का उपयोग करना चाहिए imgछवियों डाल करने के लिए के रूप में यह तुलना में बेहतर है टैग background-imageके मामले में एसईओ के रूप में आप लिख सकते हैं कीवर्ड में altकी imgटैग। तो यहाँ आप छवि को उत्तरदायी बना सकते हैं।

2. जब इमेज imgटैग में हो।

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

इसे यहां चलाएं

Answer 7

आप छवि को एक div में पृष्ठभूमि के रूप में सेट कर सकते हैं, और फिर CSS पृष्ठभूमि-आकार की संपत्ति का उपयोग कर सकते हैं :

background-size: cover;

यह "पृष्ठभूमि की छवि को जितना संभव हो उतना बड़ा कर देगा ताकि पृष्ठभूमि क्षेत्र पूरी तरह से पृष्ठभूमि की छवि से आच्छादित हो। पृष्ठभूमि छवि के कुछ हिस्से पृष्ठभूमि स्थिति क्षेत्र के भीतर देखने में नहीं हो सकते हैं" - W3Schools

Comments

मेरा मानना ​​है कि "फिट डिव कंटेनर" से ओपी का मतलब था कि छवि को आयाम में किसी भी तत्व से आगे नहीं बढ़ना चाहिए। @JonatasWalker के समाधान में, छवि क्रॉप की गई है। एक पृष्ठभूमि समाधान भी स्थिति के आधार पर शब्दार्थ रूप से सही नहीं हो सकता है। उदाहरण के लिए, आपको altमूल्यों और ऐसी चीजों की आवश्यकता हो सकती है (हालांकि आप एक डमी छवि भी जोड़ सकते हैं जो गैर-सहायक तकनीकों के लिए अदृश्य है), या आपको इसे क्लिक करने योग्य बनाने की आवश्यकता हो सकती है।

— बाल्ज़

@ Balázs आह इस मामले में सही सेटिंग होगी background-size: containऔर मुझे लगता है कि मैं व्यक्तिगत रूप से डमी छवि मार्ग पर जाऊंगा क्योंकि वहाँ वास्तव में कोई भी आसान तरीका नहीं है जो कि जावास्क्रिप्ट के बिना यहां वर्णित है

— चक ड्रिस

@ChuckDries मुझे वास्तव में यकीन नहीं है कि आपका क्या मतलब है, स्वीकृत जवाब समस्या का हल करता है।

— बाल्ज़

Answer 8

मेरा समाधान देखें: http://codepen.io/petethepig/pen/dvFsA

यह शुद्ध सीएसएस में लिखा गया है, बिना किसी जावास्क्रिप्ट कोड के। यह किसी भी आकार और किसी भी अभिविन्यास की छवियों को संभाल सकता है।

ऐसे HTML को देखते हुए:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

सीएसएस कोड होगा:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Comments

यह उन छवियों को नहीं संभालता है जो बहुत छोटी हैं।

— जोश सी

@ जोश आपका क्या मतलब है? यह एक अच्छी तरह से काम करता है: codepen.io/petethepig/pen/maeFo

— dmitry

छवियों पर 404 जो बहुत छोटे हैं।

— जोश सी

मैं यह बताना चाहता था कि यह विधि परिवर्तनीय-चौड़ाई के कंटेनरों के साथ भी काम करती है। बहुत बढ़िया काम दिमित्री!

— कैमिलो मार्टिन

एक मामूली संशोधन और एकदम सही है: codepen.io/anon/pen/BoQmBw दिमित्री धन्यवाद।

— अल्का

Answer 9

मैंने अभी-अभी एक jQuery प्लगइन प्रकाशित किया है जो आपको बहुत सारे विकल्पों के साथ की आवश्यकता है:

https://github.com/GestiXi/image-scale

उपयोग:

एचटीएमएल

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

जावास्क्रिप्ट

$(function() {
    $("img.scale").imageScale();
});

Answer 10

यह समाधान छवि को नहीं बढ़ाता है और पूरे कंटेनर को भरता है, लेकिन यह कुछ छवि को काट देता है।

HTML:

 <div><img src="/images/image.png"></div>

सीएसएस:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

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

Answer 11

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

यह काफी सरल है। मेरे द्वारा लिया गया दृष्टिकोण कंटेनर के अंदर की छवि को पूर्ण के साथ स्थिति में लाना था और फिर इसे संयोजन का उपयोग करके केंद्र में सही जगह पर रखना था :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

एक बार जब यह केंद्र में होता है, तो मैं छवि को देता हूं,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

इससे छवि को ऑब्जेक्ट-फिट: कवर का प्रभाव मिलता है।

---

यहाँ उपरोक्त तर्क का प्रदर्शन है।

https://jsfiddle.net/furqan_694/s3xLe1gp/

यह तर्क सभी ब्राउज़रों में काम करता है।

Answer 12

निम्नलिखित मेरे लिए पूरी तरह से काम करता है:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Answer 13

मेरे पास किसी भी जावास्क्रिप्ट की आवश्यकता के बिना बेहतर समाधान है। यह पूरी तरह उत्तरदायी है, और मैं इसका भरपूर उपयोग करता हूं। आपको अक्सर किसी निर्दिष्ट पहलू अनुपात के साथ कंटेनर तत्व के लिए किसी भी पहलू अनुपात की एक छवि को फिट करने की आवश्यकता होती है। और यह पूरी तरह से पूरी तरह उत्तरदायी होने के लिए जरूरी है।

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

आप स्वतंत्र रूप से अधिकतम-चौड़ाई और अधिकतम ऊंचाई सेट कर सकते हैं; छवि सबसे छोटी एक (छवि के मूल्यों और पहलू अनुपात के आधार पर) का सम्मान करेगी। आप अपनी इच्छानुसार संरेखित की जाने वाली छवि को भी सेट कर सकते हैं (उदाहरण के लिए, एक अनंत सफेद पृष्ठभूमि पर उत्पाद चित्र के लिए आप इसे आसानी से केंद्र में स्थित कर सकते हैं)।

Answer 14

अपनी छवि के लिए उस ऊंचाई और चौड़ाई को दें जिसकी आपको आवश्यकता है जिसमें <img> टैग शामिल है। उचित स्टाइल टैग में ऊँचाई / चौड़ाई देना न भूलें।

<Img> टैग में, max-heightऔर max-width100% के रूप में दे ।

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

आप इसे सही होने के बाद उपयुक्त कक्षाओं में विवरण जोड़ सकते हैं।

Answer 15

नीचे दिए गए कोड को पिछले उत्तरों से अनुकूलित किया गया है और मेरे द्वारा नामक एक छवि का उपयोग करके परीक्षण किया गया है storm.jpg ।

यह एक साधारण पृष्ठ के लिए पूर्ण HTML कोड है जो छवि प्रदर्शित करता है। यह सही काम करता है और www.resizemybrowser.com के साथ मेरे द्वारा परीक्षण किया गया था। अपने एचटीएमएल कोड के शीर्ष पर सीएसएस कोड रखो, अपने सिर अनुभाग के नीचे। जहां भी आपको पिक्चर चाहिए वहां पिक्चर कोड डालें।

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

Answer 16

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Comments

यदि आप अपने कोड की कुछ व्याख्या जोड़ सकते हैं जो अच्छा होगा (मुझे पता है कि आपके पास वहां कुछ टिप्पणियां हैं लेकिन बस कुछ शब्द क्यों / इस बारे में सवाल का जवाब देते हैं तो यह बहुत बेहतर लगेगा)।

— प्रदर्शन-नाम-गायब-

Answer 17

आपको ब्राउज़र को बताना होगा कि आप उसे कहाँ रख रहे हैं:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 18

संपादित करें: पिछले तालिका-आधारित छवि स्थिति में इंटरनेट एक्सप्लोरर 11 ( तत्वों max-heightमें काम नहीं करता display:table) के मुद्दे थे । मैंने इसे इनलाइन आधारित स्थिति से बदल दिया है जो न केवल इंटरनेट एक्सप्लोरर 7 और इंटरनेट एक्सप्लोरर 11 दोनों में ठीक काम करता है, बल्कि इसके लिए कम कोड की भी आवश्यकता होती है।

---

यहाँ मेरा विषय पर ले रहा है। यह केवल तभी काम करेगा जब कंटेनर का निर्दिष्ट आकार हो ( max-widthऔर max-heightकंटेनरों के साथ ऐसा प्रतीत न हो कि कंक्रीट का आकार नहीं है), लेकिन मैंने सीएसएस सामग्री को इस तरह से लिखा है जिससे इसे पुन: उपयोग किया जा सके ( picture-frameवर्ग जोड़ें) और px125आकार वर्ग आपके मौजूदा कंटेनर में)।

सीएसएस में:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

और HTML में:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

डेमो

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

---

संपादित करें: जावास्क्रिप्ट का उपयोग करके संभावित रूप से और अधिक सुधार (अपकमिंग इमेज):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Comments

इस पद्धति का उपयोग करने में एक खामी है। यदि छवि लोड करने में विफल रहती है, तो माता-पिता कंटेनर के साथ Alt पाठ प्रदर्शित किया जाएगा line-height। अगर ऑल्ट टेक्स्ट में एक से अधिक लाइन हैं, तो यह वास्तव में बुरा

— लगने

Answer 19

मैंने निम्नलिखित कोड का उपयोग करके इस समस्या को ठीक किया:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Answer 20

जैसा कि यहां बताया गया है , आप vhइसके बजाय इकाइयों का उपयोग कर सकते हैं max-height: 100%यदि यह आपके ब्राउज़र पर काम नहीं करता (जैसे क्रोम):

img {
    max-height: 75vh;
}

Comments

क्या आपका मतलब हैvh ? और क्रोम में क्या काम नहीं करता है?

— misterManSam

@misterManSam हाँ, आपका बहुत-बहुत धन्यवाद, कल बहुत थक गया था जब मैंने यह उत्तर पोस्ट किया। max-height: xx%(प्रतिशत इकाई) कुछ तत्वों जैसे क्रोम में काम नहीं करता है img, लेकिन vhइकाई करता है। हालांकि, प्रतिशत के साथ काम करते हैं height, width, max-width, आदि

— gaborous

Answer 21

मैंने आनुपातिक रूप से हाइपरलिंक के भीतर क्षैतिज और लंबवत दोनों तरह से एक छवि को केन्द्रित और बढ़ाया है:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

यह इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स और सफारी में परीक्षण किया गया था।

केंद्रीकरण के बारे में अधिक जानकारी यहाँ है ।

Answer 22

जब छवि बहुत छोटी हो तो Thorn007 से स्वीकृत उत्तर काम नहीं करता है ।

इसे हल करने के लिए, मैंने एक स्केल फैक्टर जोड़ा । इस तरह, यह छवि को बड़ा बनाता है और यह डिव कंटेनर को भरता है।

उदाहरण:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

टिप्पणियाँ:

1. WebKit के लिए आपको -webkit-transform:scale(4); -webkit-transform-origin:left top;स्टाइल में जोड़ना होगा ।
2. 4 के स्केल फैक्टर के साथ, आपके पास अधिकतम-चौड़ाई = 400/4 = 100 और अधिकतम-ऊंचाई = 200/4 = 50 है
3. एक वैकल्पिक समाधान 25% पर अधिकतम-चौड़ाई और अधिकतम-ऊँचाई सेट करना है। यह और भी सरल है।

Comments

यह एक बहुत विश्वसनीय समाधान नहीं है यदि आप पूरे बाजार का समर्थन करने की कोशिश कर रहे हैं। जब तक आप ब्राउज़रों के लिए किसी प्रकार का कमबैक नहीं करेंगे, तब तक मैं CSS3 के बारे में स्पष्ट कर दूंगा जो इसका समर्थन नहीं करते हैं।

— दुवेद

Answer 23

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो आपको केवल टैग में img-responsiveकक्षा जोड़ने की आवश्यकता है img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

बूटस्ट्रैप छवियाँ

Answer 24

एक सरल समाधान (4-स्टेप फिक्स !!) जो मेरे लिए काम करता है, नीचे है। उदाहरण समग्र आकार निर्धारित करने के लिए चौड़ाई का उपयोग करता है, लेकिन आप इसके बजाय ऊंचाई का उपयोग करने के लिए इसे फ्लिप भी कर सकते हैं।

1. छवि कंटेनर में सीएसएस स्टाइल लागू करें (उदाहरण के लिए, <img>)
2. आप जिस आयाम को चाहते हैं, उसकी चौड़ाई गुण सेट करें
   • आयामों के लिए, %सापेक्ष आकार या ऑटोसालिंग के लिए उपयोग (छवि कंटेनर या प्रदर्शन के आधार पर)
   • pxस्थिर, या सेट आयाम के लिए (या अन्य) का उपयोग करें
3. चौड़ाई के आधार पर स्वचालित रूप से समायोजित करने के लिए ऊंचाई की संपत्ति सेट करें
4. का आनंद लें!

उदाहरण के लिए,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Answer 25

स्वीकार किए गए सहित सभी प्रदान किए गए उत्तर, केवल इस धारणा के तहत काम करते हैं कि divआवरण एक निश्चित आकार का है। तो यह है कि रैपर का आकार जो भी हो उसे कैसे करें divऔर यदि आप एक उत्तरदायी पृष्ठ विकसित करते हैं तो यह बहुत उपयोगी है:

अपने DIVचयनकर्ता के अंदर इन घोषणाओं को लिखें :

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

फिर इन घोषणाओं को अपने IMGचयनकर्ता के अंदर रखें :

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

बहोत महत्वपूर्ण:

और चयनकर्ताओं दोनों के लिए मूल्य समानmaxHeight होना चाहिए ।DIVIMG

Comments

सही सीएसएस घोषणा ऊंट के मामले में अधिकतम ऊंचाई के बजाय 'अधिकतम ऊंचाई' है।

— मार्क टाउनसेंड

Answer 26

फ्लेक्सबॉक्स का उपयोग करने के लिए एक सरल उपाय है। कंटेनर के सीएसएस को परिभाषित करें:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

निहित छवि चौड़ाई को 100% पर समायोजित करें और आपको संरक्षित आयामों के साथ कंटेनर में एक अच्छी केंद्रित छवि प्राप्त करनी चाहिए।

Answer 27

गणित के एक बिट के साथ समाधान आसान है ...

बस छवि को एक div में रखें और फिर HTML फ़ाइल में जहाँ आप छवि निर्दिष्ट करते हैं। ऊंचाई के लिए चौड़ाई के सटीक अनुपात की गणना करने के लिए छवि के पिक्सेल मूल्यों का उपयोग करके चौड़ाई और ऊंचाई मान प्रतिशत में सेट करें।

उदाहरण के लिए, मान लें कि आपकी एक छवि है जिसकी चौड़ाई 200 पिक्सेल और 160 पिक्सेल की ऊँचाई है। आप सुरक्षित रूप से कह सकते हैं कि चौड़ाई मान 100% होगा, क्योंकि यह बड़ा मूल्य है। फिर ऊंचाई मूल्य की गणना करने के लिए आप ऊंचाई को चौड़ाई से विभाजित करते हैं जो कि 80% का प्रतिशत मूल्य देता है। कोड में यह कुछ इस तरह दिखेगा ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Answer 28

इसका उपयोग करने का सबसे सरल तरीका है object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो बस img-responsiveवर्ग जोड़ें और बदल दें

.container img{
    object-fit: cover;
}

Answer 29

मेरा उत्तर जांचें, एक छवि को उत्तरदायी बनाएं - सबसे सरल तरीका -

img{
    width: 100%;
    max-width: 800px;
}

Answer 30

या आप बस का उपयोग कर सकते हैं:

background-position:center;
background-size:cover;

अब छवि div के सभी स्थान ले लेगी।

Comments

यह आकार बदलने के बारे में इसके संरेखण के बारे में नहीं है।

— बलजीतसिंह