0

画像コンテナー div "imagebox" には、画像を含むリスト アイテムが含まれます。

CSS:

   ul.imagebox {
    width =100%;
    min-height:1000px;
    margin:0
    }

    li.image{
    float:left;
}

html

<ul class="imagebox"> 
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
<li class="image"><a><img src ="Images/Image1.jpg"/></a></li>
</ul>

実際の画像サイズは 400 px x 300 px です。ここで、jQuery を使用して img src の幅と高さを動的に設定したいので、imagebox div には 5 つの画像/行のみが含まれます。ウィンドウ幅が 1024 を超える場合にのみ動的に設定したいため、ウィンドウ幅が 1600 でウィンドウのサイズが最大 1024 に変更された場合でも、画像の幅と高さがサイズ変更されて、行ごとの画像数が維持されます。

jQuery

$(window).ready (function(){
var imagebox = $("ul#imagebox").width();
var image_width = (imagebox/5);
var image_height = (image_width * 0.75);

});

img srcjQueryを使用するために必要な幅と高さを取得しました。img scrウィンドウ幅が 1024 を超える場合にこれを設定するようにガイドしてください(最初にドキュメントをロードするか、ウィンドウのサイズを変更した後)。また、ウィンドウ幅が 1024 未満 (レスポンシブ デザインの場合) では、1 行あたりの画像数 (4、3、または 2) を隙間なく表示したいと考えています。

だから達成したい

  1. 動的な幅と高さのパラメーターは、1024 を超えるウィンドウ幅でのみ機能します。
  2. css3 メディア クエリを使用して、ウィンドウ幅が 1024 未満の画像の幅と高さの場合
4

1 に答える 1

2

これが役立つと思います。以下のコードは、your_images場合に高さと幅をwindow size is > 1024変更し、ウィンドウのサイズ変更とドキュメントの準備ができたときに実行されます。

$(document).ready(function() {
   changeSize();
});
$(window).resize(function() {
    changeSize();
});

function changeSize() {
   var docw = $(document).width();

   var imagebox = $(".imagebox").width();
   var image_width = (imagebox / 5);
   var image_height = (image_width * 0.75);

   if(docw >= 1024){
     $("your_images").width(image_width);
     $("your_images").height(image_height);
   }
}
于 2013-07-16T08:06:51.187 に答える