画像サイズをウィンドウサイズに合わせて調整する

Question

jquery/cssを使用してギャラリーのサムのサイズを相対的に変更する方法はありますか？ イメージギャラリーは、すべてのサイズの画面に合わせて画面にフィットすることを意味します。

私は1280x800とギャラリーが画面に収まると言います。 しかし、もし私が1024x768を持っているなら、私はまだその画面に画像を収めたいと思っています。

あなたは、私は彼らがウィンドウサイズに合わせて縮小したいウィンドウのサイズを変更する場合、私は画像が70枚の画像 行あたり10枚の画像列ので

あたり 7画像ティルこの

<div class="imageWrapper"> 
<img src="1.jpg" id="1"> 
<img src="2.jpg" id="3"> 
</div> 

のように座ってい

Answer 1

ご覧になれるコードスニペットはありますか？あなたの問題を解決するのに役立ちます。例えば

、あなたはこの持っている場合：

<div> 
    <img src="foo.jpg"> 
</div> 

をソリューションが

div img { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

のようなものかもしれない。しかし、あなたのサムネイルは、CSSで背景画像を持っている場合、解決策は、このようなものかもしれません：

div.thumbnail { 
    background-size: 100% 100%; /*works on FF4+/IE9+/Opera 10/Safari 4.1+/Chrome 3+ */ 
} 

EDIT：画像の束を行にしたい場合は、あなたは、私はそれが可能であると確信しています。この

.gallery { 
    width: 100%; 
    min-height: 100%; 
    height: auto; 
    zoom: 1; /*to clear the floats in IE*/ 
} 
.gallery:after { 
    content: "\0020"; /*an empty character*/ 
    display: block; 
    clear: both; 
} 
.gallery a { 
    float: left; 
    width: 23%; /*This ones assumes 4 columns (25% - 1% each side for margins) */ 
    height: 100px; /*set it to something that makes sense for your gallery*/ 
    margin: 10px 1%; /*space between each thumbnail*/ 
    overflow: hidden; 
    position: relative; 
} 
.gallery a img { 
    display: block; 
    width: 100%; 
    position: relative; 
}