मैं div के अंदर एक छवि (img) कैसे फिट करूं और पहलू अनुपात रखूं?

Question

मेरे पास एक 48x48 div है और इसके अंदर एक img तत्व है, मैं इसे किसी भी भाग को खोए बिना div में फिट करना चाहता हूं, इस बीच अनुपात रखा गया है, क्या यह html और css का उपयोग कर प्राप्त करने योग्य है?

Answer 1

यदि आप उस समय छवि के आयाम को नहीं जानते हैं, जिस समय आप css लिख रहे हैं, तो फसल को रोकने के लिए आपको कुछ JavaScript की आवश्यकता होगी।

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

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

सीएसएस

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

यदि आप एक जावास्क्रिप्ट लाइब्रेरी का उपयोग करते हैं तो आप इसका लाभ उठाना चाहते हैं।

Comments

माइकल का जवाब बहुत सरल है और यह जावास्क्रिप्ट का उपयोग नहीं करता है। मैं हालांकि ब्राउज़र संगतता के बारे में नहीं जानता।

— weberc2

नहीं, माइकल का जवाब तब तक काम करता है जब तक कि छवि डिव से बड़ी न हो। यदि आप चाहते हैं कि छवि छवि आकार के संबंध में div को भरें (और, यदि आपको पहले से छवि आकार नहीं पता है, तो आप करते हैं), यह जाने का तरीका है।

— रेमी डेविड

क्या आप अधिकतम ऊंचाई का उपयोग नहीं कर सकते: 100%; अधिकतम-चौड़ाई: 100%; न्यूनतम-चौड़ाई: 100%; न्यूनतम ऊंचाई: 100% और फिर एक ही परिणाम मिलता है? ईमानदार सवाल।

— डैनियल कैसरली

नहीं, ऐसा करने से आप चौड़ाई और ऊंचाई को 100% होने के लिए मजबूर करते हैं, इसलिए आप छवि पहलू अनुपात को बदल देते हैं।

— 19

जब ब्राउज़र में छवि कैश की जाती है तो ऑनलोड को नहीं बुलाया जाएगा, इसलिए यह केवल तब काम करेगा जब छवि पहली बार लोड हो।

— Redtopia

Answer 2

max-height:100%; max-width:100%;Div के अंदर छवि के लिए उपयोग करें ।

Comments

@ZoveGames गैर-जेएस सक्षम ब्राउज़र? 2010 के याहू आंकड़े 1.3% औसत दिखाते हैं। मुझे लगता है कि यह मान लेना सुरक्षित है कि ए। यह शायद आज कम है और बी। programmers.stackexchange.com/questions/26179/…

— ईज़ीको

यह मेरे लिए काम नहीं करता है ... यह छवि को इसका 100% आकार देता है (उदाहरण के लिए: 300px चौड़ी एक छवि के लिए जो वास्तव में 300px है)।

— टॉम ज़ातो -

कुछ भयानक क्रोम-ऑन-विंडोज विशिष्ट बग हैं जो इसका कारण बनते हैं। संभावित रूप से कुछ smoothscroll प्लगइन्स के साथ कुछ बुरा इंटरैक्शन है। यह शरीर को स्क्रॉल करने की कोशिश करता है, भले ही माउस overflow:scrollएक बड़ी छवि के साथ एक डिव के ऊपर हो। जिज्ञासु। और भी अजीब: मैक्स का समाधान वास्तव में इसे ठीक करता है। मैं सीएसएस से बहुत तंग आ चुका हूं, सच में। शक्तिशाली और मस्त हुआ करते थे। अब कार्यान्वयन सिर्फ छोटी गाड़ी असंगति के बाद छोटी गाड़ी असंगति पैदा करते हैं।

— स्टीवन लू

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

— योसी शशो

यह छवि के मूल पहलू अनुपात को संरक्षित नहीं करता है।

— βsααc t ի Ĭ 7öss

Answer 3

दुर्भाग्य से अधिकतम-चौड़ाई + अधिकतम-ऊंचाई मेरे कार्य को पूरी तरह से कवर नहीं करती है ... इसलिए मुझे एक और समाधान मिला है:

स्केलिंग करते समय इमेजobject-fit रेशो को बचाने के लिए आप CSS3 प्रॉपर्टी का भी उपयोग कर सकते हैं ।

उपयोगी लेख: CSS3 के साथ छवि पहलू अनुपात को नियंत्रित करें

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

बुरी खबर: IE समर्थित नहीं है ( क्या मैं उपयोग कर सकता हूं )

Comments

यह उत्तर के रूप में चिह्नित किया जाना चाहिए .. "ऑब्जेक्ट-फिट" ने पूरी तरह से काम किया।

— βsααc t ի Ĭ 7öss

अजीब तरह से, ऐसा लगता है कि इसके लिए समर्थन iOS 8.1 में पेश किया गया था, 8.0 नहीं।

— रे

object-fit: cover; मेरे लिए काम किया। यहाँ: stackoverflow.com/questions/9071830/…

— जेक

यदि आप चाहते हैं कि छवि केंद्रित होने के बजाय शीर्ष बाईं ओर रहे, तो आपको ऑब्जेक्ट-पोजीशन 0 0 का उपयोग करने की भी आवश्यकता है

— क्रिस राए

यह एकमात्र उत्तर है जिसने मेरे लिए एक उत्तरदायी छवि पृष्ठभूमि बनाने के लिए काम किया, जिसने छवि पहलू अनुपात को बनाए रखते हुए स्क्रीन को भर दिया।

— रे ली

Answer 4

केवल CSS का उपयोग करना:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

Comments

doesn't बड़े पैमाने पर

— JFFIGK

Answer 5

एचटीएमएल

<div>
    <img src="something.jpg" alt="" />
</div>

सीएसएस

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

यह अपने माता-पिता को भरने के लिए छवि का विस्तार करेगा, जिसका आकार divसीएसएस में सेट है ।

Comments

जोड़ नहीं है height: 100%, कि छवि अनुपात तिरछा होगा - ओपी अनुपात बनाए रखना चाहता है।

— कैसाब्लांका

मुझे यकीन नहीं है कि ओपी का मतलब क्या है लेकिन आप अनुपात को सही नहीं रख पाएंगे?

— ट्रूफा

मैं अनुपात रखने के लिए क्या कर सकता हूं? यदि मैं ऊंचाई हटाता हूं: 100% छवि क्रॉप हो जाएगी।

— बिन चेन

Answer 6

मुझे यह काम करने में बहुत समस्याएँ हो रही थीं, हर एक हल जो मुझे मिल रहा था वह काम नहीं करता था।

मुझे एहसास हुआ कि मुझे डिव डिस्प्ले को फ्लेक्स पर सेट करना है, इसलिए मूल रूप से यह मेरा CSS है:

div{
display: flex;
}

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

Comments

क्रोम संस्करण 61

— येवगेनी अफानसयेव

हो सकता है कि आपके div में अधिकतम ऊंचाई / ऊँचाई या चौड़ाई सेट हो, और इससे आपकी छवि विकृत हो रही हो।

— बर्थो बर्नसमैन

बिलकुल मेरी बात .. छवि विकृत है क्योंकि आप अपने <div class = "w">

— Bartho Bernsmann

आपके उदाहरण के लिए .. मेरा मानना ​​है कि आप अपनी छवि CSS जैसी कुछ खोज रहे हैं: ऊँचाई: ऑटो; चौड़ाई: 100%;

— बर्थो बर्नसमैन

कार्य एक div में छवि को फिट करने के लिए था, इसका मतलब है कि div में आयाम हैं और छवि में केवल पहलू अनुपात है। मुझे कुछ मूल्य पर ऊंचाई निर्धारित करने की आवश्यकता है, अन्यथा प्रश्न की स्थिति विकृत हो जाएगी और साथ ही साथ मेरी छवि भी। कृपया JS fiddle पर एक नज़र डालें और इसे बदलने के लिए जो आपको लगता है कि इसे काम करने की आवश्यकता है। धन्यवाद।

— येवगेनी अफानसेयेव

Answer 7

सीएसएस आज़माएं:

img {
  object-fit: cover;
  height: 48px;
}

Answer 8

मेरे लिए, निम्नलिखित सीएसएस ने काम किया (क्रोम, फ़ायरफ़ॉक्स और सफारी में परीक्षण किया गया)।

एक साथ कई चीजें काम कर रही हैं:

• max-height: 100%;, max-width: 100%;और height: auto;,width: auto; आयाम अनुपात को बनाए रखते हुए, जो भी पहले आयाम तक पहुँचता है को आइएमजी पैमाना बनाएं
• position: relative;कंटेनर position: absolute;में और बच्चे के साथ मिलकर top: 50%;और left: 50%;कंटेनर में img के ऊपरी बाएं कोने को केंद्र में रखें
• transform: translate(-50%, -50%); img को बाईं ओर ऊपर ले जाता है और उसके आधे आकार से ऊपर जाता है, इस प्रकार कंटेनर में img को केंद्रित करता है

सीएसएस:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

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

Answer 9

फोटो को बैकग्राउंड इमेज के रूप में सेट करने से हमें साइज और प्लेसमेंट पर अधिक नियंत्रण मिलेगा, जो एक अलग उद्देश्य की सेवा के लिए img टैग को छोड़ देगा ...

नीचे, अगर हम चाहते हैं कि div फोटो के समान पहलू अनुपात हो, तो प्लेसहोल्डर। Png एक छोटी पारदर्शी छवि है, जिसमें photo.jpg के समान पहलू अनुपात है। यदि फोटो एक वर्ग है, तो यह 1px x 1px प्लेसहोल्डर है, अगर फोटो एक वीडियो थंबनेल है, तो यह 16x9x प्लेसहोल्डर है, आदि।

प्रश्न के लिए विशिष्ट, background-sizeफोटो के पहलू अनुपात को बनाए रखने के लिए पृष्ठभूमि छवि के साथ, div के वर्ग अनुपात को बनाए रखने के लिए 1x1 प्लेसहोल्डर का उपयोग करें।

मैंने इस्तेमाल किया background-position: center center;इसलिए फोटो डिव में केंद्रित होगी। (ऊर्ध्वाधर केंद्र या तल में फोटो को संरेखित करने से img टैग में फोटो के साथ बदसूरत हो जाएगा।)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

अतिरिक्त http अनुरोध से बचने के लिए, प्लेसहोल्डर छवि को डेटा में कनवर्ट करें: URL ।

<img src="data:image/png;base64,..."/>

Answer 10

आप नए संस्करण यानी बूटस्ट्रैप v4 के लिए वर्ग "img-fluid" का उपयोग कर सकते हैं ।

और बूटस्ट्रैप v3 जैसे पुराने संस्करण के लिए वर्ग "img-responsive" का उपयोग कर सकते हैं ।

उपयोग : -

img टैग के साथ: -

वर्ग = "इमग-द्रव"

src = "..."

Answer 11

यहाँ सभी जावास्क्रिप्ट दृष्टिकोण है। जब तक यह सही ढंग से फिट नहीं होता तब तक यह एक छवि को धीरे-धीरे नीचे ले जाता है। आप हर बार असफल होने पर उसे कितना सिकोड़ना चुनते हैं। यह उदाहरण हर बार विफल होने पर इसे 10% सिकोड़ देता है:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

सीधे कॉपी और पेस्ट करने के लिए स्वतंत्र महसूस करें।

Answer 12

मेरे लिए क्या काम था:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

इनलाइन-फ्लेक्स को छवियों को div के बाहर जाने से रोकने की आवश्यकता थी।