0

我在流体拼图图像中放置了一个黑色矩形。当有足够的屏幕空间时，它会完美地显示在我想要的位置。然而，当我缩小窗口时，它后面的拼图图像会按预期调整大小，而内部的矩形则不会。如何相对于外部图像定位矩形，并在外部图像时调整内部图像的大小？

当屏幕足够宽时，这是有效的：

<body>
    <div>
    <img height="100%" width="100%" src="http://db.tt/hziXuB1a"/>
    <div style="position:absolute; left:58%; bottom:48%;">
        <a href="a.html"><img src="http://db.tt/27WmDZlc"></a>
    </div>
</body>

http://jsfiddle.net/R7t6C/27/

为内部图像添加宽度和高度是不够的，对于外部 800x400 图像也是如此。问题是我不使用 position:relative （就像我对外部一样）。这是我知道的将位置指定为外部图像百分比的唯一方法（相对于第一个位置不是 static 的父元素）。

4

2 回答 2

1

添加width: 100%和height: 100%到您的内部图像至少会调整它的大小。

<img style="width: 100%; height: 100%" src="http://db.tt/27WmDZlc">

它在调整大小时也在移动，但我不确定它与父级的关系应该在哪里。

于 2012-07-13T01:33:09.493 回答
0

HTML： 

<div id="wrapper">
  <img id="puzzle" src="http://db.tt/hziXuB1a"/>
  <a id="link" href="a.html"><img src="http://db.tt/27WmDZlc"></a>
</div>

CSS：

div#wrapper{
    position: relative;
}
img#puzzle{
    width:100%;
}
a#link{
    display:block;
    position:absolute;
    left:58%;
    top:23%;
    right: 10%;
}
a#link img{
    width:100%;
}

演示：http:
//jsfiddle.net/R7t6C/55/

注意：
<style type="text/css"></style>在 jsfiddle 的 css-section 中不需要

于 2012-07-13T10:29:52.060 回答