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

问题

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.

回答1:

I guess you'll have to resort to JavaScript:

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

JSFIDDLE

回答2:

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.

回答3:

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;
}

回答4:

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

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

回答5:

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%;
}

回答6:

You have to update your css written for image purpose

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

回答7:

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/

回答8:

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..

回答9:

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";
    })
}

来源：https://stackoverflow.com/questions/16621570/wrapping-div-is-not-resized-when-inner-image-scales-a-result-of-window-resize

标签

html

css

responsive-design