CSS इमेज-रेंडरिंग प्रॉपर्टी
उदाहरण
छवि स्केलिंग के लिए उपयोग किए जा सकने वाले विभिन्न एल्गोरिदम दिखाएं:
.image {
height: 100px;
width: 100px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.smooth {
image-rendering: smooth;
}
.high-quality {
image-rendering: high-quality;
}
परिभाषा और उपयोग
image-rendering
संपत्ति छवि स्केलिंग के लिए उपयोग किए जाने वाले एल्गोरिदम के प्रकार को निर्दिष्ट करती है ।
नोट: इस गुण का उन छवियों पर कोई प्रभाव नहीं पड़ता है जिन्हें स्केल नहीं किया गया है।
डिफ़ॉल्ट मान: | ऑटो |
---|---|
विरासत में मिला: | हां |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.imageRendering="pixelated" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome, Edge, Opera और Safari इस
crisp-edges
मान के लिए वैकल्पिक नाम का उपयोग करते हैं: -webkit-optimize-contrast
.
सीएसएस सिंटेक्स
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
auto | Let the browser choose the scaling algorithm. This is default |
smooth | Use an algorithm that smooth out the colors in the image |
high-quality | Same as smooth, but with a preference for higher-quality scaling |
crisp-edges | Use an algorithm that will preserve the contrast and edges in the image |
pixelated | If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |