javascript - 按比例缩放图像以适合当前文档尺寸

标签 javascript jquery resize image-resizing jquery-events

我有一个尺寸为 alfa x beta 像素的图像。

然后 onDocumentReadyonWindowResize 我计算当前文档尺寸。

任务是按比例缩放图像,直到达到其中一个维度。

最佳答案

$(document).ready(function() {

    scaleStart();

});

$(window).resize(function() {

    scaleStart();

});

function scaleStart() {

    $("#myImage").css("min-width", 0);
    $("#myImage").css("min-height", 0);

    var originalWidth = 1762;
    var originalHeight = 1041;

    var safeWidth = $(document).width() - 100;
    var safeHeight = $(document).height() - 100;

    var scaleWidth = originalWidth / safeWidth;
    var scaleHeight = originalHeight / safeHeight;

    if (scaleWidth > scaleHeight)
    {
        $("#myImage").css("min-width", originalWidth / scaleWidth);
        $("#myImage").css("min-height", originalHeight / scaleWidth);
    }

    else
    {
        $("#myImage").css("min-width", originalWidth / scaleHeight);
        $("#myImage").css("min-height", originalHeight / scaleHeight);
    }

} 

关于javascript - 按比例缩放图像以适合当前文档尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12452305/

相关文章:

android - 添加新行时如何调整 ListView 的大小?

python - 如何通过拖动使 PyQt 小部件可调整大小?

javascript - 使用 useEffect 上的方法时遇到困难、缺少依赖项和 useCallback 错误?

javascript - Google Drive API 中的开发者 key 无效

javascript - 将父类添加到样式标签内的 css

jquery - 根据下拉列表的变化显示文本框中的值

jquery - 基于容器宽度的图像缩放

javascript - 内联 CSS 不适用于 JS 生成的输入

jquery - 用JQuery区分和处理只有一个div项

javascript - 在 javascript 中从数组创建包含 3 列的表