माइक्रोसॉफ्ट एज छवि स्केलिंग

Question

मैं एमएस एज के लिए बाइबिक के साथ छवि स्केल कैसे बना सकता हूं? क्या कोई सीएसएस या ऐसा ही है जो व्यवहार को बदल सकता है। पर एमएस एज दो छवियों कि पृष्ठभूमि की बनावट की है देखते हैं http://duttongarage.com/Race-Workshop~317

सही पर, आप अजीब कलाकृतियों काफी स्पष्ट रूप वाम पर

क्रोम देख सकते हैं,:

यह पेज देखें सही। जैसा कि आप देख सकते हैं कि आकार के निकट पड़ोसी या रैखिक होने के आकार से कुछ अजीब मोर प्रभाव होता है, न कि बाइबिक।

एक और उदाहरण है कि और अधिक विशिष्ट है:

माइक्रोसॉफ्ट एज शीर्ष पर, क्रोम नीचे पर। पिक्सेलेशन पर ध्यान दें, जैसा कि पिछले दशक से ब्राउज़र से मैं अपेक्षा करता हूं।

Answer 1

अप्रचलित

यह अप्रचलित समाधान है और एमएस एज के हाल के संस्करणों पर काम नहीं करता।

===========

इस छोटे सीएसएस मेरे लिए समस्या तय tweak:

img { 
    -ms-interpolation-mode: bicubic; 
} 

Answer 2

जवाब का stupidness के लिए क्षमा करें, लेकिन, मैं देख सकता हूँ, एज नहीं करता है किसी छवि-प्रतिपादन विकल्पों का समर्थन नहीं करते हैं, इसलिए, कृपया चित्र का आकार बदलने के लिए jQuery का उपयोग करने का प्रयास करें।

उदाहरण के लिए, आप this answer से समाधान का उपयोग कर सकते हैं: सिर्फ <canvas id="canvas"></canvas> अपनी छवि के नीचे बना सकते हैं और देखते हैं:

screenshot

var canvas = document.getElementById("canvas"); 

var ctx = canvas.getContext("2d"); 

img = new Image(); 
img.onload = function() { 

    canvas.height = canvas.width * (img.height/img.width); 


    /// step 1 
    var oc = document.createElement('canvas'), 
     octx = oc.getContext('2d'); 

    oc.width = img.width * 0.5; 
    oc.height = img.height * 0.5; 
    octx.drawImage(img, 0, 0, oc.width, oc.height); 

    /// step 2 
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5); 

    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 
    0, 0, canvas.width, canvas.height); 
} 
img.src = "http://duttongarage.com/img/2167/824"; 

आप आसानी से गणित के साथ oc.width समायोजित कर सकते हैं। उदाहरण के लिए, आप,

oc.width = $(".me-wrap-image").width(); 
oc.height = $(".me-wrap-image").height(); 

बेहतर उपयोग कर सकते हैं अगर आप से

| .me-wrap-image 
| .some-class-to-get-width-and-height 
-> img 

अपने संरचना को समायोजित img.src के लिए आप

$("div.some-class-to-get img").each(function(){ 
    img.src = $(this).attr('src'); 
}); 

उपयोग कर सकते हैं लेकिन मैं यकीन नहीं है, कैसे इसे ठीक से काम करने के लिए। आशा है कि आप इसे ठीक करें :)