सीएसएस के साथ डिव्ज़ में छवियों को एकीकृत करना: एक प्रभावी समाधान

वेब विकास में, डिव तत्वों के भीतर छवियों को रखना अक्सर वांछनीय होता है। जबकि पृष्ठभूमि छवियों का उपयोग करना एक सामान्य दृष्टिकोण है, यह छवि के आकार के अनुरूप div की क्षमता को प्रतिबंधित करता है। इससे सवाल उठता है: हम CSS का उपयोग करके HTML संरचना

इसे प्राप्त करने के लिए, हम सामग्री का लाभ उठाते हैं छवि URL को div में सम्मिलित करने के लिए संपत्ति। निम्नलिखित सीएसएस कोड पर विचार करें:

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

यहां, हमने छवि वर्ग के साथ div में छद्म तत्व से पहले एक :: जोड़ा है। सामग्री संपत्ति छवि यूआरएल को निर्दिष्ट करती है, अनिवार्य रूप से छवि को div में एम्बेड करती है। अतिरिक्त HTML तत्वों या विशेषताओं की आवश्यकता के बिना स्वचालित रूप से लोड किया जा सकता है।

यह तकनीक क्रोम, फ़ायरफ़ॉक्स और सफारी जैसे प्रमुख ब्राउज़रों में अच्छी तरह से काम करती है।

• इस समाधान का प्रत्यक्ष अनुभव करने के लिए, निम्नलिखित लिंक पर जाएँ: http:/ /jsfiddle.net/XAh2d/. इसके अतिरिक्त, सामग्री संपत्ति का उपयोग करने के तरीके के बारे में अधिक जानकारी के लिए, http://css-tricks.com/css-content/ देखें।