Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

प्रतिक्रियाशील छवि के लिए CSS चौड़ाई गुण का उपयोग करें

<घंटा/>

प्रतिक्रियाशील छवि के लिए चौड़ाई संपत्ति को 100% पर सेट करें। आप अपनी छवि को प्रतिक्रियाशील बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
         <style>
            img {
               width: 100%;
               height: auto;
            }
         </style>
   </head>
   <body>
      <p>To check the effect, you need to resize the browser.</p>
      <img src = "https://www.tutorialspoint.com/python/images/python-data-science.jpg"
         alt = "Python Data Science" width = "400" height = "300">
   </body>
</html>

  1. CSS फॉन्ट-वेरिएंट प्रॉपर्टी का उपयोग कैसे करें (स्मॉल कैप के लिए) CSS फॉन्ट-वेरिएंट प्रॉपर्टी का उपयोग कैसे करें (स्मॉल कैप के लिए)

    CSS फ़ॉन्ट-वेरिएंट का उपयोग करने का तरीका जानें आपके टेक्स्ट के लिए स्मॉल कैप्स अक्षरों का उपयोग करने के लिए प्रॉपर्टी — और क्या आपको स्मॉल कैप्स का बिल्कुल भी उपयोग करना चाहिए। CSS font-variant संपत्ति निर्दिष्ट करती है कि आपका टेक्स्ट सामान्य टेक्स्ट केस या स्मॉल-कैप फ़ॉन्ट के रूप में प्रदर्शित ह

  1. कैसे सीएसएस के साथ एक उत्तरदायी छवि बनाने के लिए? कैसे सीएसएस के साथ एक उत्तरदायी छवि बनाने के लिए?

    सीएसएस के साथ एक प्रतिक्रियाशील छवि बनाने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    width: 100%;    max-width: 1000px; } &

  1. आईई 8 और उससे कम सहित सभी वेब ब्राउज़रों के लिए सीएसएस छवि अस्पष्टता आईई 8 और उससे कम सहित सभी वेब ब्राउज़रों के लिए सीएसएस छवि अस्पष्टता

    संपत्ति अस्पष्टता अंतिम और आधुनिक समाधान है और फ़ायरफ़ॉक्स 0.9+, सफारी 2, ओपेरा 9+, आईई 9+ और Google क्रोम के हर संस्करण के लिए काम करता है। -मोज़-अपारदर्शिता गुण 0.9 से पुराने फ़ायरफ़ॉक्स संस्करणों के लिए अपारदर्शिता गुण है जबकि -khtml-opacity गुण 1 से शुरू होने वाले सफारी संस्करणों के लिए है। फ़िल