बिना स्ट्रेच किए किसी इमेज की चौड़ाई और ऊंचाई कैसे सेट करें?

Question

अगर मेरे पास:

#logo {
    width: 400px;
    height: 200px;
}

फिर

<img id="logo" src="logo.jpg"/>

उस स्थान को भरने के लिए खिंचाव करेगा। मैं चाहता हूं कि छवि समान आकार की रहे, लेकिन इसके लिए DOM में बहुत जगह लेनी होगी। क्या मुझे एक एनकैप्सुलेटिंग जोड़ना है <div>या <span>? मुझे स्टाइल के लिए मार्कअप जोड़ने से नफरत है।

Comments

यदि आप अभी भी स्टैक ओवरफ्लो पर हैं, तो क्या आप उत्तर को अपडेट करने पर विचार करना चाहते हैं?

— मिकमेकाना

Answer 1

हाँ, आपको एक इनकैप्सुलेटिंग div की आवश्यकता है:

<div id="logo"><img src="logo.jpg"></div>

कुछ इस तरह से:

#logo { height: 100px; width: 200px; overflow: hidden; }

अन्य समाधान (पैडिंग, मार्जिन) अधिक थकाऊ होते हैं (इसमें आपको छवि के आयामों के आधार पर सही मूल्य की गणना करने की आवश्यकता होती है) लेकिन यह भी प्रभावी रूप से कंटेनर को छवि से छोटा नहीं होने देता है।

इसके अलावा, ऊपर विभिन्न लेआउट के लिए और अधिक आसानी से अनुकूलित किया जा सकता है। उदाहरण के लिए, यदि आप नीचे दाईं ओर छवि चाहते हैं:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Comments

आप <div> टैग को <आंकड़ा> से बदल सकते हैं: शब्दार्थ जोड़ते हैं और यदि आवश्यक हो, तो आप इसके लिए एक कैप्शन (<आलंकारिक>) दे सकते हैं। developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

— मेटूस लियोन

इसके अलावा, अगर यह वेबसाइट प्रस्तुति पर ब्रांडिंग के उपयोग के लिए है, तो <h1> (यदि इंडेक्स) या <p> (यदि अन्य) का उपयोग करें, तो <img> शीर्षक और Alt विशेषताओं को लागू करें, ताकि आप SEO फ्रेंडली मार्कअप जोड़ सकें । वे ब्लॉक स्तर के तत्व भी हैं, जैसे div, और आपकी फसल की कार्यक्षमता के लिए रैपर हो सकते हैं।

— माटस लियोन

मुझे नहीं पता था कि Cletus एक वेब डेवलपर था। कमाल

— पियिन

Answer 2

2017 का जवाब

सीएसएस ऑब्जेक्ट फिट सभी वर्तमान ब्राउज़रों में काम करता है। यह imgछवि को बढ़ाए बिना तत्व को बड़ा करने की अनुमति देता है ।

आप object-fit: cover;अपने CSS में जोड़ सकते हैं ।

Comments

आपको शायद यह उल्लेख करना चाहिए कि यह किस ब्राउज़र पर काम करता है।

— नाथन तुग्गी

ब्राउज़र संगतता के लिए इस लिंक की जांच करें: caniuse.com/#search=object-fit

— Alexee

Answer 3

एक डिव के लिए पृष्ठभूमि के रूप में छवि को लोड करें।

के बजाय:

<img id='logo' src='picture.jpg'>

करना

<div id='logo' style='background:url(picture.jpg)'></div>

सभी ब्राउज़र उस छवि के भाग को क्रॉप करेंगे जो फिट नहीं है।
यह एक तत्व को लपेटने पर कई फायदे हैं जिनके अतिप्रवाह छिपा हुआ है:

1. कोई अतिरिक्त मार्कअप नहीं। Div बस img की जगह।
2. आसानी से छवि को किसी अन्य ऑफसेट पर केंद्र या सेट करें। जैसे।url(pic) center top;
3. छोटा होने पर छवि को दोहराएं। (ठीक है, पता नहीं आप ऐसा क्यों चाहते हैं)
4. एक ही स्टेटमेंट में एक bg कलर सेट करें, आसानी से एक ही इमेज को कई एलिमेंट्स पर लागू करें, और वह सब कुछ जो bg इमेज पर लागू होता है।

अपडेट: यह उत्तर ऑब्जेक्ट-फिट होने से पहले का है; आपको अब ऑब्जेक्ट-फिट / ऑब्जेक्ट-पोजीशन का उपयोग करना चाहिए।

यह अभी भी पुराने ब्राउज़रों के लिए उपयोगी है, अतिरिक्त गुणों के लिए (जैसे बैकग्राउंड-रिपीट), और एज केस के लिए (उदाहरण के लिए, flexbox और ऑब्जेक्ट-पोज़िशन के साथ क्रोम बग्स और FF's (पूर्व?) ग्रिड + ऑटोहाइट + ऑब्जेक्ट के साथ समस्याएँ फिट। रैपर ग्रिड / फ्लेक्सबॉक्स में अक्सर देता है ... अनपेक्षित परिणाम।)

Comments

-1 देने वालों को कृपया अन्य उपयोगकर्ताओं के लाभ के लिए समझाना चाहिए। व्यक्तिगत रूप से, आईई पर IE6 और सफारी पर भी, उत्कृष्ट परिणामों के साथ ऐसा किया है।

— सैमगुडी

बस जोड़ना चाहता था - यह आम तौर पर एक अच्छा तरीका है। यहां तक ​​कि लोग छवि स्प्राइट शीट के अनुकूलन के लिए पृष्ठभूमि की स्थिति के निर्देशांक भी निर्दिष्ट करते हैं। एक अंतर, हालांकि, यह है कि इसमें त्रुटि ईवेंट हैंडलर नहीं है कि <img> है

— बदमाश

मैंने इन सामग्रियों के साथ div में एक वर्ग भी जोड़ दिया:background-repeat:no-repeat !important; float:left; width:100px; height:100px;

— Nils

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

— बेनेट McElwee

यह शब्दार्थ रूप से सही नहीं है। यदि यह उपयोगी है, तो HTML5 छवि से संबंधित टैग क्यों लगा रहा है, शब्दार्थ को अनुकूलित करने के लिए, अंजीर के साथ, चित्र? Img टैग का उपयोग करें क्योंकि इसे डिज़ाइन किया गया था और <div> s के साथ सब कुछ बदलना बंद कर दिया।

— मेटुस लियोन

Answer 4

CSS3 ऑब्जेक्ट-फिट

यह निश्चित नहीं है कि वेबकिट, IE और फ़ायरफ़ॉक्स द्वारा इसे कितनी दूर तक लागू किया गया है। लेकिन ओपेरा जादू की तरह काम करता है

object-fitएसवीजी सामग्री के साथ काम करता है, लेकिन preserveAspectRatio=""एसवीजी में विशेषता को स्थापित करके भी एक ही प्रभाव प्राप्त किया जा सकता है।

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

क्रिस मिल्स का डेमो यहाँ है http://dev.opera.com/articles/view/css3-object-fit-object-position/

Comments

1+ यह वास्तव में अच्छा है। बहुत बुरा सीमित समर्थन है। ऐसा लगता है कि 32 क्रोम विक्रेता उपसर्ग के बिना समर्थन करने के लिए सबसे पहले है।

— जोश क्रॉजियर

यह शानदार है, एक आकर्षण की तरह काम करता है। बस एक ही संपत्ति को जोड़ने से यह सब तय हो गया। मुझे बस क्रोम की जरूरत है और यह काम करता है। और हाँ, बिना वेंडर उपसर्ग के। धन्यवाद।

— WhyAto8

Answer 5

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Answer 6

एक div बनाओ और इसे एक क्लास दो। फिर इसमें एक आइएमजी डालें।

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

अपने div का आकार निर्धारित करें और इसे सापेक्ष बनाएं।

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

फिर अपनी छवि को स्टाइल करें

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

उम्मीद है की वो मदद करदे

Answer 7

आप नीचे के रूप में उपयोग कर सकते हैं:

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Answer 8

क्या मुझे एक एनकैप्सुलेटिंग <div> या <span> जोड़ना है?

मुझे लगता है तुम करोगे। केवल एक चीज जो दिमाग में आती है वह है पैडिंग, लेकिन इसके लिए आपको पहले से छवि के आयामों को जानना होगा।

Answer 9

आप ऊंचाई / चौड़ाई के बजाय पैडिंग सेट करने का प्रयास कर सकते हैं।

Answer 10

जो मैं सोच सकता हूं, वह चौड़ाई या ऊँचाई को फैलाना है और इसे अनुपात-पहलू में आकार देना है। किनारों पर कुछ सफेद जगह होगी। एक वाइड स्क्रीन 1024x768 के रिज़ॉल्यूशन को कैसे प्रदर्शित करता है, ऐसा कुछ है।

Answer 11

यदि फ्लेक्सबॉक्स का उपयोग करना आपके लिए एक वैध विकल्प है (पुराने ब्राउज़रों को अधिग्रहित करने की आवश्यकता नहीं है), तो मेरे अन्य उत्तर को यहां जांचें (जो संभवतः इस का एक डुप्लिकेट है):

मूल रूप से आपको एक div में अपने img टैग को लपेटने की आवश्यकता होगी और आपकी सीएसएस इस तरह दिखाई देगी:

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

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

Answer 12

यह काफी पुराना प्रश्न है, लेकिन मेरे पास ठीक वही परेशान करने वाला मुद्दा है जहां क्रोम / एज (ऑब्जेक्ट-फिट प्रॉपर्टी के साथ) के लिए सब कुछ ठीक रहा, लेकिन IE11 में उसी css प्रॉपर्टी ने काम नहीं किया (जब से IE11 में इसकी असमर्थता थी), मैं समाप्त हो गया HTML5 "आंकड़ा" तत्व का उपयोग करके जो मेरी सभी समस्याओं को हल करता है।

मैंने व्यक्तिगत रूप से बाहरी DIV टैग का उपयोग नहीं किया क्योंकि इससे मेरे मामले में बिल्कुल भी मदद नहीं मिली, इसलिए मैंने बाहरी DIV से परहेज किया और बस 'फिगर' तत्व को बदल दिया।

नीचे दिए गए कोड छवि को अच्छी तरह से (मूल पहलू अनुपात को बदले बिना) कम करने के लिए मजबूर करते हैं।

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

और सीएसएस कक्षाएं:

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}