Question

问题：要使插件内的图像动态调整大小（H＆amp; W，按比例）调整窗口大小调整后的div（主要有三个区域：顶部 - 静态，底部 - 静态，中间 - 动态）使用width:100%和top:#px bottom:#px。图像最终也必须仅调整其设定高度（603x427）

这是页面：

My current woe

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

<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);是允许分页。

Answer 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());
});

Answer 2

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

否则，只要您具有原始比率（定量= orgWidth / orgHeight），您就可以将其与宽度/高度反映出来。在调整大小时，height = org_height * ratio。完成之前，它非常直接： How to resize images proportionally / keeping the aspect ratio?

使用jquery，动态地和按比例调整img的大小

2 个答案: