Html 在另一个调整大小的图像上相对显示图像

我正在创建一个测验编辑器。 用户应该能够在图像上设置复选框

我有一个代表区域的div 里面有一个图像 在图像上有复选框

图像可以有任何大小，我不知道图像的大小 复选框应相对于图像定位 图像应位于区域的中心

我需要一些动态的，屏幕应该可以调整大小

我有以下代码：

HTML

<div class="boundary" >
  <div class="mycomponent">
    <div class ="container"> 
      <img style="display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto;" src="image.jpg" >
      <img style="left: 20.3501%; top: 44.448%; display: block; position: absolute;" id="imgi0" src="uncheck.png">
      <img style="left: 52.7185%; top: 35.7171%; position: absolute;" id="imgi1" src="uncheck.png">
      <img style="left: 82.0456%; top: 31.3517%; position: absolute;" id="imgi2" src="uncheck.png"> 
    </div>
  </div>
</div>

jsfiddle：

该代码在chrome和safari上运行良好，但在firefox和ie9中失败+

有线索吗

---

我更新并清理了你的小提琴，让它更清晰。您可以为类指定“mycomponent”

max height

，而不是

height

.container{
    max-height: 43%; // You had "height:43%";
    width: 89.29%; 
    top: 26.78%; 
    left: 5.496%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    position: absolute; 
    padding: 0px; 
    text-align: center; 
    border-color:#000000;
    border-style: solid;
    background-color: beige;
}

工作

---

它在每个浏览器中都对我有用，即使你调整了窗口的大小。

我在Chrome中没有看到任何复选框，图片上只有三个灰色的小正方形。因此，首先，如果您需要复选框，请使用

而不是

小灰方作为复选框。为了代码的清晰，我删除了所有的js。调整大小时，复选框会在图像上移动：谢谢，图像显示良好，但复选框与图像无关。我需要显示与图像相关的复选框。我还尝试为容器定义display:initial和position:initial。图像的渲染效果也很好，但不幸的是效果不好checkbox@Serge好的，我会尝试修复：）非常感谢，但它仍然不起作用。我有两个问题：图像显示不好。它可以通过定义容器显示内联而不是内联块和删除位置来解决。在这种情况下，图像显示良好。但第二个问题是，左边的复选框是相对于容器的。我需要相对于图像。你说的“显示不好”是什么意思？它应该是什么样子？

.container{
    max-height: 43%; // You had "height:43%";
    width: 89.29%; 
    top: 26.78%; 
    left: 5.496%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    position: absolute; 
    padding: 0px; 
    text-align: center; 
    border-color:#000000;
    border-style: solid;
    background-color: beige;
}