1

私は次のコードを使用しています：

<div data-role="homepage">
    <div data-role="content">   
        <div id="selectCircle">
        <img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"><br>
        <img src="res/images/auto.png" alt="AutoMoto.sk" id="autoCircle">
        <img src="res/images/mobil.png" alt="MobilMania.sk" id="mobilCircle">
        </div>
        <!-- <a href = "feeds.html" rel="external" data-role="button">index</a> -->
    </div>
</div>

および次のCSS：

#selectCircle{
    position:fixed;
    top: 10%;
    width: 100%;
    text-align: center;
}
#mobilCircle{
    position:absolute;
    right: 50%;
}
#autoCircle{
    position:absolute;
    left: 50%;
}

画像をフルサイズにできると、すべてが見栄えがします。しかし、私はそれらを画面サイズの変更に合わせてサイズ変更してほしい。したがって、ブラウザウィンドウを縮小したり、モバイルでコードを読み込んだりすると（画像がフルサイズで表示されなくなります）、画像はdivに合わせてサイズ変更され、div内の位置が維持されます。

PS： divの境界線を表示しようとしましたが、最初の画像の高さがあるように見えますが、下の2つの画像も含めたいと思います。

編集：ここに画像へのリンクがあります：image1、image2、image3そしてこれが私がそれをimageのように見せたい方法です。

4

2 に答える 2

3

を使用するposition: fixedとposition: absolute、レスポンシブに開発するのが面倒になります。relative要素の配置とfloatingに慣れる必要があります。

これは、あなたが求めていることを達成すると私が思う例です。

于 2012-09-19T16:19:50.027 に答える
0

window.innerWidth と window.innerHeight を使用してみてください。オンリサイズと組み合わせる。以下のリンクは、これを実現する方法の例を示しています。ウィンドウのサイズがわかれば、画像のサイズを適切に変更できます

リンク: http://www.w3schools.com/jsref/prop_win_innerheight.asp

http://www.w3schools.com/jsref/event_onresize.asp

于 2012-09-19T17:11:21.977 に答える