CSS छवि शैली सेट करना
- पिछला पृष्ठ CSS टूल्टिप
- अगला पृष्ठ CSS object-fit
CSS के द्वारा छवि शैली सेट करने के बारे में सीखें।
दूरवर छवि
का उपयोग करके border-radius गुण को गोलीय छवि बनाएं:
थंबनाम छवि
का उपयोग करके border गुण को थंबनाम बनाएं।
थंबनाम:
उदाहरण
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
प्रतिक्रियावान छवि
प्रतिक्रियावान छवि स्वचालित रूप से स्क्रीन आकार के अनुसार समायोजित होगी।
यदि आप छवि को आवश्यकता के अनुसार छोटा करना चाहते हैं लेकिन उसे मूल आकार से बड़ा करने से बचना चाहते हैं, तो नीचे दिए गए कोड को जोड़ें:
उदाहरण
img {
max-width: 100%;
height: auto;
}
सूचना:हमारे CSS RWD ट्यूटोरियल प्रतिक्रियावान वेब डिजाइन के बारे में अधिक जानकारी सीखें।
केंद्रित छवि
यदि आप छवि को केंद्रित करना चाहते हैं, तो बाएं-दाएं बाहरी घेरा को सेट करें auto इसे ब्लॉक एलीमेंट के रूप में सेट करें:
उदाहरण
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
बोलीया पिक्चर / कार्ड
पीला ट्यूट
लाल ट्यूट
उदाहरण
div.polaroid {
width: 80%;
background-color: white;
बॉक्स-शैडो: 0 4px 8px 0 रेगा(0, 0, 0, 0.2), 0 6px 20px 0 रेगा(0, 0, 0, 0.19);
}
img {विस्तार: 100%}
div.container {
टेक्स्ट-एलाइन: सेंटर;
पैडिंग: 10px 20px;
}
पारदर्शी इमेज
ऑपासिटी अभियान का मान 0.0 - 1.0 के बीच होता है। मान कम होने के साथ-साथ पारदर्शीता बढ़ती है:
ऑपासिटी 0.2
ऑपासिटी 0.5
ऑपासिटी 1 (मूलभूत)
उदाहरण
img {
ऑपासिटी: 0.5;
}
इमेज टेक्स्ट
चित्र में टेक्स्ट का स्थान निर्धारित करने के लिए कैसे:
उदाहरण
अपने आप प्रयोग कीजिए:
इमेज फिल्टर
CSS फिल्टर अभियान को इलेमेंट में दृश्यमानता (जैसे धुंधलापन और सूचकीयता) जोड़ता है。
ध्यान दें:इंटरनेट एजेंट या एजेंट 12 फिल्टर अभियान का समर्थन नहीं करता。
उदाहरण
सभी चित्रों का रंग सफेद-सफेद (100% ग्रे) में बदलें:
img {
फिल्टर: ग्रे(100%);
}
सूचना:हमारे CSS फिल्टर संदर्भ मैनुअल،CSS फिल्टर के बारे में अधिक जानकारी के लिए
इमेज होवर ओवरले
माउस होवर पर ओवरले का निर्माण करने के लिए:
चित्र को उल्टा करें
माउस को चित्र पर ले जाएं:
उदाहरण
img:hover {
ट्रांसफॉर्म: स्केलएक्स(-1);
}
रिस्पोंसिव इमेज लाइब्रेरी
हम CSS का उपयोग करके रिस्पोंसिव इमेज लाइब्रेरी बना सकते हैं。
इस उदाहरण में मीडिया क्वेरी का उपयोग किया गया है ताकि विभिन्न स्क्रीन आकार के लिए चित्रों को दोहराया जा सके। ब्राउज़र विंडो के आकार को समायोजित करके प्रभाव को देखें:
उदाहरण
.responsive {}}
पैडिंग: 0 6px;
फ्लोट: बाईं;
विस्तार: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {}}
विस्तार: 49.99999%;
मार्गिन: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {}}
width: 100%;
}
}
सूचना:हमारे CSS RWD ट्यूटोरियल में रिस्पोंसिव वेब डिजाइन के बारे में अधिक जानें。
इमेज मॉडल (Image Modal)
यह CSS और JavaScript कैसे सहयोग करते हैं का एक नमूना है。
पहले, CSS का उपयोग करके मॉडल विंडो (डायलॉग) बनाएं और उसे मूलभूत रूप से छुपा रखें。
तब, जब उपयोगकर्ता इमेज पर क्लिक करता है, तो JavaScript का उपयोग करके मॉडल विंडो दिखाएं और मॉडल के अंदर इमेज दिखाएं:
- पिछला पृष्ठ CSS टूल्टिप
- अगला पृष्ठ CSS object-fit
