Question

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

时调整内部图像的大小

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

<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（就像我对外部一样）。这是我知道将位置指定为外部图像的百分比（relative to the first parent element that has a position other than static）的唯一方法。

Answer 1

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

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

它在调整大小时也会移动，但我不确定与父母相关的位置。

Answer 2

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/

注意：
jsfiddle

的css-section中不需要<style type="text/css"></style>

如何在另一个内部调整图形大小？

2 个答案: