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 に答える