Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required.
Initially, the solution involved wrapping the image in a div with a relative position and using absolute positioning for the element. However, this approach failed to work consistently across different browsers.
Upon loading the provided fiddle, the dummy image displays correctly initially. Yet, when adjusting the size of the window in Chrome or Firefox, the red div containing the image becomes visible, causing the element to shift from its intended position. Interestingly, this issue does not occur in Safari.
The main question now is: How can the image be kept tightly wrapped at all times?
UPDATE: It is essential that the div containing the image remains 100% the size of its parent without deviation.
Fiddle: http://jsfiddle.net/12q26xu7/2/
html,
body {
height: 90%;
padding: 0;
margin: 0;
text-align: center;
}
.child-wrapper {
height: 50%;
}
.image-wrap {
position: relative;
height: 100%;
display: inline-block;
background: red;
border: 1px solid blue;
}
.image-wrap img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.image-wrap .point {
position: absolute;
left: 20%;
top: 30%;
border-radius: 50%;
background: #000000;
width: 10px;
height: 10px;
}<html>
<body>
<div class="child-wrapper">
<div class="image-wrap">
<img class="viewer__image" src="http://dummyimage.com/300">
<div class="point"></div>
</div>
</div>
</body>
</html>