सीएसएस तरल छवि प्रतिस्थापन?

Question

किसी छवि के साथ पाठ को प्रतिस्थापित करने के लिए सीएसएस का उपयोग करना एक प्रसिद्ध अभ्यास है। सीएसएस-ट्रिक्स में कुछ तकनीकों का एक संग्रहालय है (http://css-tricks.com/examples/ImageReplacement/)।

लेकिन इनमें से कोई भी द्रव छवि के प्रतिस्थापन के लिए अनुमति नहीं देता है (उदाहरण के लिए, एक लोगो जो द्रव पृष्ठ लेआउट के 100% तक फैला हुआ है)। क्या द्रव छवि प्रतिस्थापन करने के लिए सीएसएस का उपयोग करना संभव है?

लगभग सभी छवि प्रतिस्थापन तकनीक पृष्ठभूमि-छवि का उपयोग करती हैं। और मुझे पता है कि आप background-size: 100% सेट कर सकते हैं। लेकिन पाठ तत्व की ऊंचाई को इसकी चौड़ाई के साथ स्केल करने के लिए सीधा नहीं है क्योंकि ब्राउज़र पृष्ठभूमि छवि को सामग्री के हिस्से के रूप में नहीं मानता है।

मैं समझता हूं कि किसी भी सामान्य छवि प्रतिस्थापन तकनीकों को मीडिया तत्वों के साथ आसानी से जोड़ा जा सकता है ताकि पाठ तत्व के आकार को बढ़ने के लिए विशिष्ट ऊंचाई x चौड़ाई अनुपात में बदल दिया जा सके। लेकिन यह तरल पदार्थ नहीं है, तरल पदार्थ है।

मुझे एक ब्लॉग पोस्ट मिला जो इस पर चर्चा करता है (http://viljamis.com/blog/2011/fluid-image-replacement.php)। लेकिन यह पता चला है कि वास्तव में एचटीएमएल सामग्री में एक छवि डालने की आवश्यकता है। मैं असली पाठ प्रतिस्थापन की तलाश में हूं।

Answer 1

कुछ नगण्य लिया, लेकिन मैं एक तरीका खोज निकाला। कुंजी सेट करने के लिए पैडिंग प्रतिशत का उपयोग करना है, क्योंकि padding-top और padding-bottom प्रतिशत कंटेनर चौड़ाई से जुड़ा हुआ है (height के विपरीत, जो कंटेनर ऊंचाई से जुड़ा हुआ है)।

एचटीएमएल

<h1 class="logo">The Logo</h1> 

सीएसएस

h1.logo { 
    background-image: url('logo.png'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
} 

padding-top चौड़ाई द्वारा छवि ऊंचाई विभाजित किया जाता है कहाँ।

कार्य उदाहरण: http://jsfiddle.net/bXtRw/

मैं ध्यान दें जाएगा कि overflow: hidden का उपयोग कर के बजाय text-indent: -9999px भी काम करना चाहिए। लेकिन मुझे फ़ायरफ़ॉक्स में अस्थिर व्यवहार मिलता है।

इसके अलावा, के बजाय font-size: 0 का उपयोग फ़ायरफ़ॉक्स में अस्थिर व्यवहार उत्पन्न करता है।

Answer 2

div कि पृष्ठभूमि छवि है पर:

div { 
    max-width: 100%; 
    width: 100%; 
    min-height: 300px; //Adjust this number accordingly 
    height: auto; 
} 

Answer 3

मैं @Warren Whipple के समान विधि का उपयोग करता हूं, लेकिन मैं आमतौर पर compass/sass का उपयोग करता हूं। आप वेनिला सीएसएस का उपयोग कर के लिए सीमित नहीं कर रहे हैं, इस विधि अच्छी तरह से सार कुछ टुकड़ों:

// Only works in Compass/Sass – not regular CSS! 
h1.logo { 

    $header-logo-image: "logo.png"; 

    background: image-url($header-logo-image) no-repeat; 
    background-size: 100%; 
    height: 0; 
    padding-top: percentage(image-height($header-logo-image)/image-width($header-logo-image)); 
    overflow: hidden; 
    width: 100%; 
} 

तुम सिर्फ अपनी छवि के नाम के साथ $header-logo-image चर को बदलने के लिए होना चाहिए।

---

इसके अलावा, मैं कभी कभी जोड़ें: max-width: image-width($header-logo-image); है, जो अपनी पृष्ठभूमि छवि के अलावा कोई बड़ा आकार होने से h1 कर पाएगा।