Why is the image not paying attention to the max-width?

Question

css

The image lies in a block whose width is set in%.
I put a picture width:100%and everything is fine.
And if I put a clear width in place, max-width:100%then the picture simply does not pay attention - it stretches as it wants, according to its true width.
Why?
jsfiddle.net/2mrn5epp/3
In FF I check, if anything. Everything is fine in chrome.

Answer 1

This is a bug https://bugzilla.mozilla.org/show_bug.cgi?id=975632
Add

.wrapper {
    ....
    table-layout: fixed;
    width: 100%;
}
img{
    max-width: 100%;
}

Replace max-width: 150px; and min-width: 150px; on the

.two {
    ....
    width: 150px;
}

table-cell is a table cell and it is not affected by max/min-width and plus max/min-width with the same value is the same as width 150
and this is also not needed

.main {
   .....
    width: 100%;
    max-width: 200px;
}

jsfiddle.net/ufwvr90r

Answer 2

Butter oil... width - width, max-width - maximum possible width. It's not clear what you want...
If the image should fit the size of the block, width:100% is enough.
If we are talking about the size of the picture without taking into account the block, it is written here .
If you want to limit the image inside the block to a certain size, then the max-width value should not be a percentage. Specify in px, in em, cm, mm or something even more specific.

Answer 3

Because is an inline element. Those. its percentage width is taken from its true width and only affects the width of the element, not the width of the container block.
If you want responsive design, forget the img tag. Use the css background property.
example