0

问题：要使插件内的图像在窗口调整大小时变短的 div 内动态调整大小（H&W，按比例）（基本上有三个区域：顶部 - 静态、底部 - 静态、中间 - 动态），使用width:100%和top:#px bottom:#px. 图像还必须最终仅调整其设定高度（603x427）

这是页面：

我目前的困境

我非常接近，但是下面的代码会发生什么：

<script type="text/javascript">
            $(window).resize(function() {
                var hgt = $(window).height() - 427;
                var wid = $(window).width() - 633;
                $('.slides_container img').height(hgt);
                $('.slides_container img').width(wid);
                $('.slides_container').height(hgt-30);
                $('.slides_container').height(hgt);
                $('.vid').width($(window).width());
            });
</script>

是图像的高度变化，宽度也是如此，但它们不会按比例变化。相反，宽度正确更改，高度正确更改，但彼此独立。我希望图像保持成比例。

图例：.slides_container是插件的一部分，包含图片，.slides_container img是图片，.vid包含.container用于居中。对于上面的代码，$('.slides_container').height(hgt-30);就是允许分页。

4

2 回答 2

1

请改用 css() 函数：

$(window).resize(function() {
    var hgt = $(window).height() - 427;
    var wid = $(window).width() - 633;
    $('.slides_container img').css({
        width:wid,
        height:hgt
    });
    $('.slides_container').height(hgt);
    $('.vid').width($(this).width());
});
于 2012-04-08T22:38:54.947 回答
0

如果可以妥协，没有 img 元素你可以把它作为背景，那么我认为这就是你正在寻找的http://css-tricks.com/how-to-resizeable-background-image/

否则，只要您具有原始比率（比率 = orgWidth/orgHeight），您就可以将其反映在宽度/高度上。在调整大小时，height = org_height * ratio. 以前完成，它非常简单： 如何按比例调整图像大小/保持纵横比？

于 2012-04-08T23:32:37.970 回答