3

I have a markup with two containers. The first one is set to "position:absolute" with all 4 "coordinates" to expand all over the site (left=right=bottom=top=30px).

Inside that container is another container with its height set to "100%" and "display:inline-block" ("inline-block" because that 2nd container should expand itself horizontally only to the required width).

Inside the 2nd container is an image with its height set to "100%" and its width set to "auto", so that the image is always as tall as the two containers and still has the correct proportion.

I need this 2nd container because I want to place some absolute positioned elements inside this container to always appear on the right side of the image.

The problem is the following: In Firefox this 2nd container does not grow/expand horizontally with the auto-width of the image. It stays at the original width of the image. No Problem in Safari/Chrome, only Firefox.

Here you can find an example-fiddle: http://jsfiddle.net/EGRCQ/ The 1st container is the blue one. Inside this you will find the 2nd container (red) and inside this container an example image. If you reduce the height of the output window below 180px you will see the problem (red container becomes visible) or you just use Firebug to inspect its width.

HTML

<body>
    <div id="container1">
        <div id="container2">
            <img src="http://cdn4.spiegel.de/images/image-491267-thumb-wjvo.jpg"
                 width="180" height="180" />
        </div>
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;    
}
#container1 {
    background: aqua;
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
}
#container2 {
    background: red;
    height: 100%;
    display: inline-block;
}

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

thanks,

daniel

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
user1254824
  • 131
  • 2
  • 9

3 Answers3

4

Shrink-wrapping a fluid image

A version of this problem occurs in IE10, Chrome, and Safari as well. It's more obvious if the image is made partially transparent, as in this modified demo. container2 is sized as intended when the page first loads, but if the browser is resized, it keeps its initial width.

Opera behaves the same as Firefox.

It appears that the shrinking-wrapping of container2 (its width being only so large as is needed to fit its content) depends to some extent on having a known width to work with for the child content. For Firefox and Opera, when given width:auto for the child image, it uses the natural width of the image, regardless of the actual scaled width. The other browsers are able to calculate the display width when shrink-wrapping container2, but they only do so when the page first loads; after that, the initially-calculated value continues to be used.

In short, Firefox and Opera never perform the width calculation. And the other browsers only perform it when the page first loads, not when the browser is re-sized.

Workaround

There doesn't appear to be an obvious way to force the browsers to perform a width calculation for the child image; however, if the only reason that container2 is needed is to absolutely position other content on the right side on the image, then there's another way to accomplish this:

Instead of shrink-wrapping a container around the image, place an element alongside it (inline-block or floated), and use that element to place the absolutely positioned content.

In both demos, container2 is a sibling of the image. A small element with text content and a black background is absolutely positioned in container2, to demonstrate placing content to the right of the image. To make things more obvious, container2 was given a width of 10px and the same red background, but it works fine with a width of 0.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • Thanks Matt. Your workaround is actually pretty elegant, but unfortunately not usable in my case. In fact I have to position two elements over the image - one on the left side with 40% width and one on the right side (navigation layers). So I need a container that knows the width of the image. So I will have to use javascript to accomplish this. But I still let your answer be the accepted one as others might have use for your workaround. thanks – user1254824 May 03 '13 at 08:46
  • btw, what I don't understand is why "display:inline" works and "display:inline-block" does not. If you set Container2 to "display:inline" it expands with the image inside. Shouldn't "display:inline-block" behave exact the same way? – user1254824 May 03 '13 at 12:42
  • @user1254824: I also tried shrink-wrapping `container2` by giving it `position:absolute` or floating it, but that didn't work any better. I see what you mean about `display:inline`. Here's the closest I got to a [working demo](http://jsfiddle.net/Matt_Coughlin/75Wxm/) using `display:inline` (which is generally not reliable for absolute positioning and nesting block-level elements). The [demo](http://jsfiddle.net/Matt_Coughlin/75Wxm/) seems to work in FF, Safari, Chrome, and Opera, but not IE10. – Matt Coughlin May 03 '13 at 16:10
0

Simply remove the width declaration in the <img> tag.

emijayne
  • 46
  • 3
  • Thanks, but this does not work. Was not even there in the original code. I just added it to help Firefox calculate the image proportions. – user1254824 May 02 '13 at 18:54
0

fix is very simple if the width of the container is smaller that the width of the image

.element:after {
    color: transparent;
    content: "a";
}
dsl400
  • 322
  • 3
  • 14