Wrapping div is not resized when inner image scales (a result of window resize)

Question

I want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

img {
    height: 100%;
    width: auto;
}

But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.

Here is the fiddle (try resizing the result panel)

Update:

Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.

I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.

Update #2:

The div has to stay of block type as I need to place other elements in the corners of the image.

I don't know this [jsFiddle](http://jsfiddle.net/CXLg4/) is something you want or not. I made a fullscreen background with responsive option. Btw, it's using JavaScript and jQuery. — , May 30 '13 at 07:52

score 3 · Answer 1 · answered May 24 '13 at 05:36

3

I guess you'll have to resort to JavaScript:

$(window).on('resize', function (){ 
    $('div').width($('img').width());
});

JSFIDDLE

answered May 24 '13 at 05:36

Tomas Kirda

8,347
3
31
23

Yeah, was trying to avoid js. – Xyand May 24 '13 at 07:01

Nitesh · Answer 2 · 2013-05-24T05:59:06.567

3

You just have to keep your image max-height to be 100%. Thats it.

Here is the Working Solution

The HTML:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

The CSS:

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline;
}

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

EDIT

Updated CSS for the img class to make the image fit the full div. Here is the working solution for the edit.

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

Hope this Helps.

edited May 24 '13 at 05:59

answered May 24 '13 at 05:38

Nitesh

15,425
4
48
60

1

You might want to set `display: block` on the image to get rid of some added inline spacing under the image. – Mathijs Flietstra May 24 '13 at 05:54
oops.. I missed that. Updated. Nice catch. -@user1846192 – Nitesh May 24 '13 at 05:58
1

Perfect! Could you please explain why this works and the original code doesn't? Did you mean `max-height` or `max-width` in the first sentence? – Xyand May 24 '13 at 06:13
If you are satisfied with the answer and the efforts, kindly accept it with a green tick and upvote. Thank you - @Xyand – Nitesh May 24 '13 at 06:19
The only issue with your solution was that the div had to be converted from its inherent block display to inline. Now for the image, making it to a block display meant that it was a perfect fit inside the div. max-height and max-width meant that when the window was scaled down, the div with image could also stretch. Hope this helps. - @Xyand – Nitesh May 24 '13 at 06:32
So in fact it has nothing to do with `max-width`/`max-height`. Settings `display: inline;` does the trick. – Xyand May 24 '13 at 06:41
Yes. `display:inline;` is sufficient, but ideally if you work on mulitiple images and streching issues if they do occur, `max-height` for the images should be used. - @Xyand – Nitesh May 24 '13 at 06:46
Hey you forgot to award your bounty. :) - @Xyand – Nitesh May 24 '13 at 06:47
I have to wait 24 hrs. But I'm not sure that your solution is sufficient. I need the wrapper to be of block type (for placing other contained elements). Anyhow, if `inline` is the key here then please make it clear in your answer. It is hard to understand from the text. – Xyand May 24 '13 at 07:00
Yes it is the `display:inline;` that should be used for this case, but as you mentioned that you need to make this a block, I suggest you to create a block wrapper `div` and place this inline div inside it as it is going to accomodate the images if I assume from your scenario, then all the contained elements will be placed inside the main parent block div. - @Xyand – Nitesh May 24 '13 at 07:21
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30534/discussion-between-xyand-and-nathan-lee) – Xyand May 24 '13 at 07:26
Odd.. Even now, this doesn't seem to work for `inline-block` elements. In chromium and opera I get [slightly different behavior](http://stackoverflow.com/questions/35097704/make-element-same-width-as-dynamically-sized-image?noredirect=1#comment57939818_35097704) from what the OP described. Firefox seems the same. – gandalf3 Jan 31 '16 at 20:46
@gandalf3 - Can you share more information as well as link to the issue? – Nitesh Feb 03 '16 at 13:10
@NKL The question I linked has a [fiddle](https://jsfiddle.net/601a5uqv/) which demonstrates the behavior I've noticed (albeit with some extra stuff on the side) – gandalf3 Feb 03 '16 at 19:23

score 1 · Answer 3 · answered May 30 '13 at 07:36

I have had a bit of a go at your fiddle but I don't think browsers will change the width of a div based on the width of the image inside it changing its width, I have tried a few things but couldn't get it to work.

I can however suggest another approach to placing elements in the corners of your auto re-sizing image. Instead of placing these elements inside a div which is also holding the image, you could just float the image and float some div's with a fixed width to the right and the left of the image, and then make those div's cut into the image by setting some negative margins on them.

Here's an example jsFiddle demonstrating this approach. You'll see that the images stay in the corners of the main image when you resize the result window (and thereby changing the size of the main image).

HTML

<div class="right">
    <img src="..." />
    <img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
    <img src="..." />
    <img src="..." />
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
img {
    height: 90%;
    float: left;
}
div {
    float: left;
    width: 40px;
    position: relative;
    z-index: 1;
    height: 90%;
}
div.left {
    margin-left: -40px;
}
div.right {
    margin-right: -40px;
}
div > img {
    padding: 3px;
    border: 2px dashed blue;
    width: 30px;
    height: 30px;
}
div > img:last-child {
    bottom: 0px;
    right: 0px;
    position: absolute;
}

It looks like an interesting direction. However, in the end I do need to wrap it inside a container as part of a larger structure (gallery). Ideas? — Xyand, May 31 '13 at 19:05
No ideas, I don't think CSS will let you re-size a wrapper element based on the image inside it re-sizing, I think you'll just have to use JavaScript for that. — Mathijs Flietstra, Jun 01 '13 at 10:04

score 0 · Answer 4 · answered May 24 '13 at 05:44

0

you want to give your image width to 100%. Use this.

img {
 height: 100%;
 width: 100%;
}

answered May 24 '13 at 05:44

Bharat Chodvadiya

1,644
4
20
31

I need width to be proportional to height. Not 100% of containing element. – Xyand May 24 '13 at 07:01

score 0 · Answer 5 · answered May 24 '13 at 05:46

When you provide a width and height for the div in %, it resizes according to the page size. And the image size in % is relative to the div width and height. I have kept the div height at 90% of the available space and width at 50%. The image is at 90% both height and width, so that you can see the re-sizing of both image and div sections.

html, body {
height: 100%;
width: 100%;
}

 div {
height: 90%;
background-color: black;
width:50%;
}

img {
height: 90%;
width: 90%;
}

score 0 · Answer 6 · answered May 30 '13 at 13:00

0

You have to update your css written for image purpose

img {
    max-height: 100%;
    max-width:100%;
}

answered May 30 '13 at 13:00

Swarnamayee Mallia

2,004
14
11

score 0 · Answer 7 · answered May 31 '13 at 02:05

0

If I understood correctly, you want to resize image by height but keep proportional size?

If so, use this:

img {
height: 100%;
display: inline-block;
}

You might want to use display: block; as well, depending on your needs.

FIDDLE: http://jsfiddle.net/zhyv9/38/

answered May 31 '13 at 02:05

Nikola R.

1,173
6
23

Now try resizing the window and see what happens – Xyand May 31 '13 at 06:23
Image resizes proportionally, still. – Nikola R. May 31 '13 at 15:19
Not with latest Chrome. With Firefox the image is resized but the wrapping div isn't (my original problem) – Xyand May 31 '13 at 18:54
Use display: block; instead. If you need to position it to the left, use float: left; – Nikola R. Jun 01 '13 at 00:32

score 0 · Answer 8 · answered May 31 '13 at 10:12

0

I have updated the fiddle, with the Img tag self close that may cause error some times..,

and If the image have specified size height and width then it will also resize, and the corresponding div height increases/decrease as 90% when I zoom-in/zoom-out

I hope this is the answer, as I have understood wrapping and re-sizing, Please reply if not working..

answered May 31 '13 at 10:12

MarmiK

5,639
6
40
49

Hi, it didn't really answer my question. – Xyand May 31 '13 at 18:56
Can you please be more specific, If other way I see, you want image to resize automatically with size of div? if that is the case you must use JavaScript with the browser size changed event.. and assign parents width to image width – MarmiK Jun 01 '13 at 05:42
I want image height to be re-sized with div (works) and width to be set proportionally. But I want the div to shrink and occupy only the image space. – Xyand Jun 01 '13 at 10:51
I have updated the fiddle : http://jsfiddle.net/MarmeeK/zhyv9/41/ but imge have 3px transparency in footer else woking fine now.. :) – MarmiK Jun 03 '13 at 04:25
Sorry, the image isn't scaled when window is resized. – Xyand Jun 03 '13 at 07:17
on Resize is not called in CSS, it is drawn on the loading time stats available.. if in that case use jQuery answer given by Tomas Kirda that will do.. will post if come across something new.. :) – MarmiK Jun 03 '13 at 11:19
See my answer (+original CSS). It does the trick. No escape from js though – Xyand Jun 03 '13 at 11:35
Old trick was to reload location.reload(); but its not good in current scenario, as we use ajax and reloading the page is bad custom.. so jQuery comes handy.. – MarmiK Jun 03 '13 at 11:41

score 0 · Accepted Answer · answered May 31 '13 at 19:25

Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.

window.onresize = function() {
    $(".thumb").each(function() {
        this.style.display = "none";
        this.offsetWidth;
        this.style.display= "inline-block";
    })
}

Wrapping div is not resized when inner image scales (a result of window resize)

9 Answers9

Linked