0

我正在创建一个带有几个 div 和一个徽标的。

调整页面大小时，徽标位于 div 下方，这并不是真正的问题。

但是，我确实希望图像和 div 在发生重叠之前调整到最小宽度。例如，假设用户在 1920x1080 的屏幕上打开页面，图像的宽度为 250 像素，div 框为 800 像素。但是，当他调整大小时，图像和 div 将相互“挤压”到一个点（图像的最小宽度 = 100px；div = 400px）。

我已经编写了代码，这些代码会在这些元素开始重叠时显示出来，并且它可以工作，但我不知道如何调整元素的大小。目前，我只是减去 1，但这不起作用，因为有时它们在调整大小时会重叠。

这是jQuery代码：

$(window).resize(function(e) {
    if($(window).width()-$('.info').width()-170-$('.logo').width() < 0 && $('.logo').width() > 100 && $('.info').width() > 400) {
        $('.info').width($('.info').width()-1);
        $('.logo').width($('.logo').width()-1);
    } else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0 && $('.logo').width() < 250 && $('.info').width() < 800) {
        $('.info').width($('.info').width()+1);
        $('.logo').width($('.logo').width()+1);
    }
});

我将不胜感激在使这些元素正确调整大小方面的任何帮助。我知道我显然在实际调整元素大小时遗漏了一些东西。有任何想法吗？

4

1 回答 1

0

所以我自己修好了。在此处发布以备将来参考或有人有更好的方法（甚至对此进行改进）。这是我第一次尝试这样的事情，所以请放轻松嘿嘿嘿

$(window).resize(function(e) {
resizeAfter = $(window).width();
if($(window).width()-$('.info').width()-170-$('.logo').width() < 0) {
    if($('.logo').width() > 100){
        $('.logo').width($('.logo').width() - (resizeBefore-resizeAfter));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() < 100) {
            $('.logo').width(100);
            $('.logo').height(100*ratio);
        }
    } else if($('.info').width() > 510){
        $('.info').width($('.info').width() - (resizeBefore-resizeAfter));
        if($('.info').width() < 510) {
            $('.info').width(510);
        }
    }
} else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0){
    if($('.info').width() < 800){
        $('.info').width($('.info').width() + (resizeAfter-resizeBefore));
        if($('.info').width() > 800) {
            $('.info').width(800);
        }
    } else if($('.logo').width() < 250){
        $('.logo').width($('.logo').width() + (resizeAfter - resizeBefore));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() > 250) {
            $('.logo').width(250);
            $('.logo').height(250*ratio);
        }
    }
}
resizeBefore = $(window).width();
});
于 2012-08-06T06:13:32.697 回答