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 边框，它看起来像第一个图像的高度，但我希望它也包括底部的两个图像。

编辑：这里是图像的链接：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。结合onresize。下面的链接显示了如何实现这一目标的示例。当您知道窗口的大小后，您可以适当地更改图片的大小

链接： http ://www.w3schools.com/jsref/prop_win_innerheight.asp

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

于 2012-09-19T17:11:21.977 回答