当他们'它们都是跨浏览器缩放的
How properly calculate and place an image on top of another image when they're both scaled - cross browser?
我有一个基本图像,上面有项目。如果用户禁用了其中一个项目,那么它应该显示为已禁用。为了处理这个问题,我使用了禁用项目的第二个图像(png),并将其放置在背景图像上方的正确位置。
当没有缩放时,这在所有浏览器中都能完美工作。
当存在缩放时(例如,在移动浏览器中,当图像为原始大小的40%时),此仅适用于Firefox。Firefox总是将图片放在正确的位置,覆盖下面的项目。
其他浏览器(Android上的Chrome、iOS上的Safari)总是关闭1-2像素,具体取决于缩放级别。所以你可以在下面看到一些项目。
我如何做到这一点,使其跨浏览器工作?
var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;
//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
var disabled = disableds[ i ];
/**
* I also tried with "parseInt", but it still doesn't work.
*
* originalLeft/Top/Width/Height are the values saved in
* JavaScript when the page is first loaded before everything
* is scaled.
*/
disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
disabled.style.top = ( heightRatio * disabled.originalTop ) + "px";
disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
disabled.style.height = ( heightRatio * disabled.originalHeight ) + "px";
//Make visible
disabled.style.visibility = "visible";
}
您的背景使用白色还是其他纯色?然后您可以尝试这样做:在bg部分上放置一个空div,然后应用background-color: rgba(255, 255, 255, .5)
。这应该会给你同样的效果,而且它会节省大量额外的图像。但只有当"你的bg"是纯色时才有效。
该问题仅出现在WebKit中,单独计算宽度和高度比会使浏览器无法正确调整图像大小和放置图像。如果我将代码更改为只使用宽度比,那么所有浏览器中的所有内容都会正确放置:
//We no longer use height ratio for the height/top calculations
//var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;
//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
var disabled = disableds[ i ];
/**
* I also tried with "parseInt", but it still doesn't work.
*
* originalLeft/Top/Width/Height are the values saved in
* JavaScript when the page is first loaded before everything
* is scaled.
*/
disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
disabled.style.top = ( widthRatio * disabled.originalTop ) + "px";
disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
disabled.style.height = ( widthRatio * disabled.originalHeight ) + "px";
//Make visible
disabled.style.visibility = "visible";
}
相关文章:
- 未注释img´除非调整浏览器大小、缩放或打开开发工具,否则不会显示
- 如何在缩放时获取移动浏览器窗口的宽度
- 当只给定宽度或高度时,是否所有浏览器都按比例缩放图像
- Canvas(fabricjs)阻止网络浏览器在手机上缩放和移动
- 有没有办法防止浏览器缓存滚动位置和缩放级别等值
- 如何为您的网站/视口设置最小宽度,并在宽度低于该宽度时进行浏览器缩放
- 如何根据浏览器缩放自动调整数据表
- 在 Safari 浏览器 (iOS 7) 上,在捏合缩放下调整事件大小,仅在横向缩放中
- 使用 JavaScript 模仿浏览器缩放
- 在页面更改时重置浏览器缩放级别
- 防止跨浏览器缩放
- 通过视口或 javascript 设置浏览器缩放
- 当他们'它们都是跨浏览器缩放的
- 无法修复浏览器缩放时滑块移动距离
- Javascript:如何使用第三方获得浏览器缩放级别
- 当用户浏览器缩放时,如何处理覆盖
- 禁用浏览器缩放
- 基于浏览器缩放更改css
- 触发键盘按下以重置浏览器缩放
- 当我的网站打开时,强制浏览器缩放级别