1

助けてください。ブラウザウィンドウのサイズが変更され、位置合わせされたまま、3つの画像のブロックをスケーリング/サイズ変更できるようにしようとしています。

ここに画像がどのように配置されるかの初期レイアウトを示す JSFiddle を作成しました: http://jsfiddle.net/headshot_harry/3eEDH/2/

画像を含むコードは次のとおりです。

<div style="width: 100%; margin: 0 auto -80px auto;">
    <div style="display: inline-block; border: 1px solid black; padding: 3px; text-align: center;">
        <div style="display: inline-block; margin: 0 4px 0 0; padding: 0; background-color: White; border: 1px solid black;
            width: 51%; vertical-align: top;">
            <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove2.png" style="width: 100%;" />
        </div><div style="display: inline-block; margin: 0; margin: 0; width: 26%;">
            <div style="border: 1px solid black; margin-bottom: 3px;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White; margin-bottom: 4px;" />
            </div>
            <div style="border: 1px solid black;">
                <img src="http://www.zen87038.zen.co.uk/image/glove/gs_golf_glove4.png" style="width: 100%; background-color: White;" />
            </div>
        </div>
    </div>
</div>

基本的に、それは適度にうまくスケーリングしますが、整列を維持する方法がわかりません。私は自分よりもずっと進んでいて、パーセンテージで完全に混乱していると思います.

上記の JSFiddle が示すように、ブロックの左側に 1 つの画像を配置し、理想的にはブロックの右側を小さな 3/4/5 ピクセルで占める 2 つの画像を重ね合わせる必要があります (機能するものは何でも) ) 画像間のギャップ。次に、ブラウザが縮小または拡大されたときに、画像も縮小または拡大したいと思います。

誰でもこれで私を助けることができますか？

4

2 に答える 2

5

サイトがレスポンシブであることを確認する必要があります。サイトのサイズ変更に合わせて img を変更するため。img サイズをパーセントにする必要があります。例を確認してください。http://designsbycamaron.net/equal-image-heightswidth/これは私のjsfiddle への直接リンクです。

img {
   width: 80%;
   height: auto;
 }
于 2013-06-05T16:22:52.500 に答える