Question

我正在使用下面的代码：

<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的方式

Answer 1

使用position: fixed和position: absolute会使响应式开发变得痛苦。您应该尝试使用relative定位和float元素。

Here's an example我认为你会完成你所追求的目标。

Answer 2

尝试使用window.innerWidth和window.innerHeight。结合onresize。下面的链接显示了如何实现这一目标的示例。当您知道窗口的大小时，您可以适当地更改图片的大小

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

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

调整屏幕大小的图像大小

2 个答案: