0

私は現在、新しいWebポートフォリオをプログラミングしています。ここまでは順調ですね。私はそれを完全に％ベースにすることに決めました、そして私は最後の詳細に苦労しています：

％ベースの画像も％ベースのdivボックスの中央に垂直に配置する必要があります。

これがフィドルです：http：//jsfiddle.net/PX4tF/4/

これは、私が望むように機能しないコードです。

$(document).ready(function(){

         $(window).resize(function(){

          $('.vertical_center').css({
           position:'relative',
           left: ($(window).width() 
             - $('.vertical_center').outerWidth())/2,
           top: ($(window).height() 
             - $('.vertical_center').outerHeight())/2
          });

         });

         // To initially run the function:
         $(window).resize();

        });

現在使用しているスクリプトは、ウィンドウのサイズを変更した場合にのみ正しく機能し始めます。その前は、画像を中央に配置しますが、正しくはありません。また、私のページにフィドルのような複数のdivボックスがあり、現在、ブラウザーが抵抗された後、スクリプトを複製して正しく中央に配置する必要があります。それを簡単にする方法はありますか？

ベータサイトへのリンクは次のとおりです：http：//www.zeiteffekt.de/relaunch

私はそのプログラミングの人ではないので、皆さんがこれを手伝ってくれることを願っています。

乾杯、ティム

4

2 に答える 2

1

このようなことを試してください 

function alignImage()
{
    $('.vertical_center').css({
        position:'relative',
        left: ($(window).width() - $('.vertical_center').outerWidth())/2,
        top: ($(window).height() - $('.vertical_center').outerHeight())/2
    });
}
$(window).load(function() {
    alignImage();
});
$(window).resize(function() {
    alignImage();
});

$(document).ready が呼び出されたときに画像の準備ができていません。代わりにロードを使用

于 2013-01-09T12:32:55.590 に答える
0

これを試して：

 $(window).resize(function(){
        $( ".img-swap").each(function() {
            $(this).css({
               position:'relative',
               marginTop: ($(this).parent().outerHeight() 
                - ($(this).outerHeight()+15))/2
             });
         });
});

jsfiddle代わり
に置き換えるのは、画像のみをプッシュしながら、画像のすぐ下にテキストをプッシュするのに役立つからです。marginToptopmarginToptop

于 2013-01-09T12:59:20.793 に答える