Wrap a div around the img width and keep the div 100% taller
I ran into a problem where I need to position an element on top of an image at a specific location in the image (say 20% on top and 30% on the left).
My suggested solution was to wrap the image in a div with relative
and then put the element with the absolute
top and left position is simple. But after many tries, I can't seem to get this to work and it looks like different behavior in browsers.
When you load the fiddle below, the dummy image will work on page load, BUT when you start expanding or shrinking the result window in Chrome or Firefox, you will start to see a red div
one containing the image.This makes the point move away from the intended point. This doesn't happen in Safari.
So the question is, how can I keep the image tightly wrapped at all times?
UPDATE . In response to the answer: The div containing the image must be 100% of the size of its parent, it cannot be larger or smaller than that.
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>
source to share
Basically you need three different things:
- Let the image (or wrapper
div
) get the height of the parentdiv
- Maintaining the aspect ratio of the image
- Resize the image based on
viewport-height
and-width
As we tried together, we couldn't fix it with just help CSS
, so I came up with the following idea: what if we get the height parent div
and apply that height to the image?
This is why I came up with the following solution:
OPTION 1
Adding the following jQuery snippet (and of course the jQuery library), the image relation persists across window resize.
$(function() {
var height = $('.child-wrapper').height();
$( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});
$( window ).resize(function() {
var height = $('.child-wrapper').height();
$( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});
You also need to get rid of all the sizes specified in the CSS for .image-wrap
and .image-wrap img
, so you are left with this:
.image-wrap {
position: relative;
display: inline-block;
background: red;
border: 1px solid blue;
}
.image-wrap img {
vertical-align: middle;
}
OPTION 2
If you want you can add as well box-sizing: border-box;
, so the border becomes part of the div, not around it. However, the image will be overflowing, which means that you will need to remove 2 pixels (or at least thick borders) from the image. You can easily do this with the jQuery below, which is very similar to the one on top, but edited to work with box-sizing
.
$(function() {
var height = $('.child-wrapper').height();
$( ".image-wrap" ).css('height', height + 'px');
$( '.image-wrap img').css('height', height -2 + 'px');
});
$( window ).resize(function() {
var height = $('.child-wrapper').height();
$( ".image-wrap" ).css('height', height + 'px');
$( '.image-wrap img').css('height', height -2 + 'px');
});
Both of these examples need to be configured, so they work exactly the way you want it to work in your project.
source to share
Just make the div height and width auto
:
.image-wrap {
position:relative;
height: auto;
width:auto;
display: inline-block;
background: red;
border: 1px solid blue;
}
EDIT
As per your updated question, to maintain 100% of the height and width of the aspect ratio, I don't think you can do it with pure css, so the following bit of js should do it:
$('.image-wrap').each(function () {
var wrap = $(this),
image = wrap.children('img:eq(0)'),
ratio = image.width() / image.height();
wrap.data('ratio', ratio);
});
$(window).resize(function () {
$('.image-wrap').each(function () {
var wrap = $(this),
image = wrap.children('img:eq(0)'),
width = image.height() * wrap.data('ratio');
image.width(width);
wrap.width(width);
});
});
source to share