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 +

中失败

任何线索？

Thansk很多

Answer 1

我更新并清除你的小提琴，使其更清晰。你可以给你的班级＆＃34; mycomponent＆＃34; 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

即使您调整窗口大小，它也会在每个浏览器中为我工作。

在另一个已调整大小的图像上显示图像

1 个答案: