html - 显示相对于另一个调整大小的图像的图像

Question

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

我有一个代表区域的 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>

CSS

.boundary
{
    left: 0px;
    display: block;  
    position: absolute;  
    right: 0px;  
    bottom: 50px;  
    top: 75px;
    background-color: aquamarine;
}
.mycomponent
{
    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;
}

.container
{
   display: inline-block;  
    position: relative;
    overflow: hidden;
}

jsfiddle : http://jsfiddle.net/jlogan/91p06yjm/

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

有什么线索吗？

非常感谢

Answer 1

我更新并清除了您的 fiddle ，使其更清晰。你可以给你的类“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;
}

工作 fiddle

它适用于所有浏览器，即使您调整窗口大小也是如此。