0

ホームページ用に作成した画像があります。Photoshop を使用してスライスし、スタイル設定された div のセットとして保存しました。通常、この種の Web サイトを作成するときは、いくつかの異なるサイズを作成し、javascript を使用して使用可能なウィンドウ サイズを検出し、適切なページを読み込みます。ゲームをステップアップして同じスタイルの Web サイトを作成したいのですが、何らかの形の jquery を使用してすべての画像のサイズを変更し、画面が小さくなったり大きくなったりするにつれてプロポーションを制限します。利用可能な画面の幅/高さに応じた最大サイズ。

現在、 jquery-imagefitというプラグインを見つけました。これは、ウィンドウ サイズの変更に合わせて画像をスケーリングするのに優れています。何らかの理由で実装すると、画像が互いに分離し、各画像間にギャップが生じます。

このWebサイトにimagefitを実装するのを手伝ってくれる人はいますか? 画像が画面の下部に浮かび、そこから拡大縮小するのが理想的です。ページへのリンクは次のとおりです。

http://www.uvm.edu/~areid/homesite/div-style/index.html

ありがとう

ケイティ

4

2 に答える 2

0

上記で提案したように、CSS フロートを使用して画像を整理し、パーセンテージを使用してサイズを変更できます。

役立つコードをいくつか入力しました。

HTML:

<div class="everything">

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/01.gif" style="width:100%">
    </div>

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/02.gif" style="width:31%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/forehead-mouse.gif" style="width:38%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/04.gif" style="width:31%">
    </div>

</div>​

CSS:

.everything{
    width:100%;
}

.row{
    overflow:hidden;
}

.row img{
    float:left;
}​

JSfiddle で表示できます: http://jsfiddle.net/9MEn7/5/

明らかに、これは私が作成した完全なソリューションではありませんが、開始する必要があります。「列」の画像を同じ高さにするなど、より実用的な方法で画像を切り取ることをお勧めします。

于 2012-11-05T00:13:37.353 に答える
0

理解している場合は、画像タグに幅を適用せず、DIV の CSS を次のように設定してください。

#divID img {
    max-width: 100%;
    max-height: 100%;
}
于 2012-11-04T23:05:11.470 に答える