0

さて、これは私が現在私のウェブページに持っているものです: j sfiddle(dot)net/gTF9y/4/

これは、1 つの画像が異なるモニター解像度に合わせて調整されるようにする CSS コードを含む、1 つの画像にすぎません。

私がやりたいことは、Webページの外観をまったく同じにすることですが、1つの大きな画像ではなく、同じ位置に12の個別の画像を配置して、それらの画像を本質的にクリックできる「ボタン」にすることができます別の Web ページに移動します。

ただし、画像を異なるモニター解像度に調整する機能は保持したいと思います。

本当にありがとう！

4

2 に答える 2

0

css を使用して 3x3 グリッドの画像を作成できます。

http://jsfiddle.net/gTF9y/1/

.block { width:33.33333%; float:left; display:block; }
.block img {display:block; max-width:100%; width:100%; }

ページの読み込み時に画像をワープしたい場合は、jQuery を使用して画像をウィンドウの高さと幅の 1/3 に設定できます。.resize() をスローすると、ロード後にブラウザーの変更に応答します。

http://jsfiddle.net/gTF9y/3/

于 2013-04-24T02:14:45.590 に答える
0

ページを 4x3 グリッドに分割した例を次に示します。

<html>
    <body>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </body>
</html>

html, body
{
    height: 99%;
    margin: 0;
}

div
{
    display: inline-block;
    height: 33%;
    width: 25%;
}

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

これを生成する：

<img src="something.png">あとは、 each の中に追加するだけです<div></div>。

これは、すべての画像が追加されたJSFiddle ( edit ) です。

于 2013-04-24T02:07:27.360 に答える