如何在放大和缩小时保持 div 大小不变？ [复制]答案

【问题标题】：How to keep div size constant on zoom in and zoom out? [duplicate]如何在放大和缩小时保持 div 大小不变？ [复制]
【发布时间】：2023-03-19 16:00:01
【问题描述】：

查看this website 上的此滑块，然后按 CTRL + + 或 CTRL + - （放大，缩小）你就会明白我的意思了。

这怎么可能，当我们缩放页面时，保持滑块及其内容的大小相同。

我猜它使用任何 jQuery/JavaScript 脚本，我不确定。谢谢。

【问题讨论】：

您可以检查在缩放过程中触发了哪个 Javascipt 事件（如果有的话）。
您也可以使用不受缩放影响的百分比值
@CarlosBergenDyck 那么它不会跟随容器大小吗？
CarlosBergenDyck 的建议不起作用，请记住图像有自己的分辨率。
@IrinelIovu 那是哪个轮播插件？也许它有自己的resize-method？

标签： javascript jquery html css

【解决方案1】：

您可以使用事件处理程序简单地重新计算滑块尺寸，如下所示：

$(document).on('keydown', function(e){
    if(e.ctrlKey) {

        if(e.which === 187) {
            // zoom-in, +
        }

        if(e.which === 189) {
            // zoom-out, -
        }

    }
});

更新

我注意到您可以简单地使用resize-event 来检查窗口大小是否已更改：

$(window).on('resize', function(){
    alert(true)
});

http://fiddle.jshell.net/aZagW/1/

更新2

你使用的滚动条有自己的refresh-method：

根据新状态刷新轮播。通过在 windows resize 事件上调用此方法可以使轮播具有响应性。

https://github.com/richardscarrott/jquery-ui-carousel#refresh-rs-carouselcarouselrefresh

【讨论】：

这仅涉及使用键盘进行放大和缩小，而不是鼠标。
那根本不够好用，想想看，有很多不同的屏幕分辨率。
@IrinelIovu 见我的comment。
@yckart 我做了，但是，如何保持大小不变？这是我真正的问题。 jsfiddle.net/9RPdL

【解决方案2】：

你可以试试这样的

window.onresize = function()
{
    var elementWidth = window.innerWidth
    var element = document.getElementById('element')
    element.style.width = parseInt(elementWidth)/2 // for example if you want it always be half of page 
}

【讨论】：