Display images relative on another resized image - html

Question

I'm creating a quiz editor.
User should be able to put check box on image
I have a div who represent a zone
inside, there is an image
on the image there are check box.
image may have any size, i don't know the size of image
check box should be positioned relative to the image
image should be center on the zone
I need something dynamic, screen should be resizable
i have the following code:
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/
This code works fine on chrome and safari but failed in firefox and ie9+
any clue ?
Thansk a lot

Answer 1

I updated and cleared your fiddle to make it clearer. You can give your class "mycomponent" max-height instead of 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;
}
Working fiddle
It's working for me in every browser, even if you resize the window.