CODEWITHSUNDEEP
htmlcssresponsive-design
ffrappo
ffrappo

Reputation: 5395

Image with max-width and max-height becoming relative to... itself

I'd like to receive a solid answer about this scenario.

CSS

article {
    overflow: hidden;
    display: inline-block;
    border: 1px solid;
}
img {
    max-width: 40%;
    max-height: 65%;
}

HTML

<article>
    <img src="http://placehold.it/200x800">
</article>
<article>
    <img src="http://placehold.it/800x800">
</article>

What happens:

The images become relative to their own container, which is sized after them, so they seem to become relative to themselves.

Is this documented? What decides which property leads? Why does the effect stop on the first round and doesn't repeat until their size is 0? Lastly: any useful way to use this effect?

http://jsfiddle.net/frapporti/9kgBP/

Upvotes: 1

Views: 147

Answers (1)

Andrei Volgin
Andrei Volgin

Reputation: 41089

You did not set any size on your article element. Therefore, it takes its size from its own content - an image element. You also set no size in the image element, which is a good practice. For this reason a browser does not know which size to set until the image renders.

In effect, you forced browsers to guess. Not surprisingly, they all guess in their own way. Open the same fiddle in different browsers and see that they render this setup differently. If you set size attributes on your image elements, the rendering will be totally different. If you set sizes on article elements, the rendering will be different again.

The bottom line: don't try to confuse browsers - the result is unpredictable.

And if you like self-reference as a concept, enjoy Godel, Escher, Bach: An Eternal Golden Braid by Douglas Hofstadter. This is one of my favorite books.

Upvotes: 1

Related Questions