Apologies for the simplicity of this answer, but it appears that Edge does not support image-rendering options. To resize an image, you may want to consider using jQuery.
One solution is to follow the guidance provided in this response:
simply create a
<canvas id="canvas"></canvas>
element below your image and refer to:
the screenshot here
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";
You can adjust the value of oc.width using mathematical calculations. For instance, you could use
oc.width = $(".me-wrap-image").width();
oc.height = $(".me-wrap-image").height();
It would be beneficial if you organize your structure like this
| .me-wrap-image
| .some-class-to-get-width-and-height
-> img
To set img.src, you can utilize
$("div.some-class-to-get img").each(function(){
img.src = $(this).attr('src');
});
I'm uncertain about how to ensure its proper functioning.
Hopefully, you are able to resolve any issues that arise :)