如何为MS Edge制作双倍的图像尺寸?有没有一些CSS或类似的可以改变行为.
见本页:http://duttongarage.com/Race-Workshop~317
在右边有两个具有纹理背景的图像,你可以很清楚地看到这些奇怪的文物
左侧的Chrome,右侧的MS Edge.正如你可以看到,从调整大小是一个奇怪的莫尔效应是最近邻或线性,而不是双三足.
另一个更典型的例子是:
Microsoft Edge顶部,Chrome底部.注意像素化,就像我从过去十年的浏览器所期望的那样.
解决方法
对于愚蠢的答案,但是,如我所见,Edge不支持任何图像呈现选项,所以请尝试使用jQuery调整图片大小.
例如,您可以使用this answer的解决方案:
只需创建< canvas id =“canvas”>< / canvas>在你的形象下,看:
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,oc.width,oc.height); /// step 2 octx.drawImage(oc,oc.width * 0.5,oc.height * 0.5); ctx.drawImage(oc,oc.height * 0.5,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'); });
但我不确定,如何使其正常工作.希望你修复它:)
原文地址:https://www.jb51.cc/css/217216.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。