CSS के साथ div में इमेज कैसे डालें?

Question

मैं अपनी सभी छवियों को सीएसएस में रखना चाहता हूं (एकमात्र तरीका मुझे पता है कि उन्हें पृष्ठभूमि छवियों के रूप में कैसे रखा जाए)।

लेकिन इस समाधान में समस्या यह है कि आप कभी भी डिव को छवि का आकार नहीं दे सकते।

तो मेरा सवाल है: <div><img src="..." /></div>CSS में समतुल्य होने का सबसे अच्छा तरीका क्या है ?

Comments

पृष्ठभूमि एक विकल्प नहीं है: पृष्ठभूमि का उपयोग करना होगा यदि चित्र सामग्री की समझ के लिए प्रासंगिक नहीं हैं, अन्यथा वे नियमित रूप से होने चाहिए<img>

— Fabrizio Calderan

मैन्युअल रूप से छवि के आकार का पता लगाने और div को समान देने के अलावा, मुझे नहीं लगता कि आप कर सकते हैं।

— जावद

सही तरीका: <img>यदि छवि प्रासंगिक है, <div>तो पृष्ठभूमि के साथ यदि छवि केवल आंख-कैंडी है। यदि छवि का आकार परिवर्तनशील और महत्वपूर्ण है, तो आपको उपयोग करना चाहिए <img>। आप पृष्ठभूमि का उपयोग क्यों करना चाहते हैं?

— एलेसेंड्रो पेज़ेटो

Answer 1

जाप का यह उत्तर :

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

और सीएसएस में:

div.image {
   content:url(http://placehold.it/350x150);
}​

आप इसे इस लिंक पर आज़मा सकते हैं: http://jsfiddle.net/XAh2d/

यह सीएसएस सामग्री के बारे में एक लिंक है http://css-tricks.com/css-content/

यह क्रोम, फायरफॉक्स और सफारी पर परीक्षण किया गया है। (मैं एक मैक पर हूं, इसलिए यदि किसी के पास IE पर परिणाम है, तो मुझे इसे जोड़ने के लिए कहें)

Comments

यह divछवि के उसी आकार को लेना नहीं है , जैसा आपने पूछा था। देखो कि क्या होगा यदि आप div में एक सीमा जोड़ते हैं: jsfiddle.net/XAh2d/6 कुछ भी नहीं, क्योंकि div का आकार 0x0 है और छवि के पीछे छिपा हुआ है।

— एलेसेंड्रो पेज़ेटो

आपको हटाना चाहिए: इससे पहले, मैंने अपना उत्तर संपादित किया। इसे यहाँ देखें jsfiddle.net/2pFhc

— Dany Y

@ डैनी अरे, आपने कहा था कि आपने अपनी फ़ेल्ड को अपडेट किया है, लेकिन मुझे वहाँ केवल हरी सीमाएँ दिखाई देती हैं: jsfiddle.net/2pFhc क्यों?

— शारिकोव व्लादिस्लाव

यह मेरे लिए फ़ायरफ़ॉक्स 55 पर काम नहीं करता था। कुछ क्रॉसबोवर निर्णय की आवश्यकता है। पहले के साथ काम करता है |

— मार्सेलो बोनागी

एफएफ और क्रोम पर मेरे साथ काम करता है :: पहले और प्रदर्शन: फ्लेक्स; => jsfiddle.net/q0vL1m7v/1

— कैटवेज़ल

Answer 2

तुम यह केर सकते हो:

<div class="picture1">&nbsp;</div>

और इसे अपने css फ़ाइल में डालें:

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

अन्यथा, उन्हें सादे के रूप में उपयोग करें

Comments

मैं निश्चित आकारों से बचने की कोशिश कर रहा था।

— दानी वाई

यदि आप निश्चित आकारों से बचने की कोशिश कर रहे हैं, तो सबसे आसान तरीका सादे imgटैग का उपयोग करना है । आप इसे पूरा करने के लिए क्या प्रयास कर रहे हैं? हो सकता है कि प्रोग्रामिक रूप से एक और समाधान हो, जैसे कि PHP के माध्यम से छवि का आकार प्राप्त करना और फिर उस निश्चित छवि के लिए एक संबंधित styleऔर imgटैग को प्रतिध्वनित करना ।

— जूडजित्सु

Answer 3

इसे एक नमूना कोड के रूप में लें। अपनी छवि आयामों के साथ इमेजहाइट और छवि चौड़ाई बदलें।

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

Comments

काम करता है लेकिन सवाल "सीएसएस" के बारे में था

— माइकल बर्मन

शायद यह नहीं होना चाहिए।

— जस्सोनलहार्ड

Answer 4

जावास्क्रिप्ट / Jquery के साथ:

• छिपी के साथ छवि लोड करें img
• जब छवि लोड हो गई है, तो चौड़ाई और ऊंचाई प्राप्त करें
• गतिशील रूप से एक divऔर सेट चौड़ाई, ऊंचाई और पृष्ठभूमि बनाएँ

• मूल निकालें img

    $(document).ready(function() {
      var image = $("<img>");
      var div = $("<div>")
      image.load(function() {
        div.css({
          "width": this.width,
          "height": this.height,
          "background-image": "url(" + this.src + ")"
        });
        $("#container").append(div);
      });
      image.attr("src", "test0.png");
    });