Из за чего картинка не обращает внимания на max-width?

Question

[Extramezz]

Картинка лежит в блоке, ширина которого задается в %.

Ставлю картинке width:100% и все нормально.
А если за место четкой ширины ставлю max-width:100% то картинка просто не обращает внимания - растягивается как хочет, по своей истинной ширине.

Почему?

jsfiddle.net/2mrn5epp/3

В FF проверяю, если что. В хроме все нормально.

Answer 1

[Андрей Б.]

Это баг https://bugzilla.mozilla.org/show_bug.cgi?id=975632

Добавить

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

Заменить max-width: 150px; и min-width: 150px; на

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

table-cell это ячейка таблицы и на неё не действует max/min-width и плюс max/min-width с одинаковым значением это все равно что width 150

и это тоже не нужно

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

jsfiddle.net/ufwvr90r

Comments

[Extramezz]

Спасибо!

Answer 2

[Григорий]

Масло масляное... width - ширина, max-width - максимально возможная ширина. Не понятно чего хотите...
Если картинка должна быть по размеру блока, достаточно width:100%.
Если речь о размере картинки без учета блока - здесь написано.
Если хотите ограничить определённым размером картинку внутри блока, тогда значение max-width не должно быть в процентах. Указывайте в px, в em, cm, mm или чем то еще более конкретном.

Comments

[Extramezz]

Хочу ограничить картинку по размеру, но ширина родителя то в %, а получается px и прочие не пойдут.

[Григорий]

Extramezz: конкретнее, как ограничить? Чтобы картинка была меньше блока на определенный процент или размер? Или может чтобы при увеличении блока картинка растягивалась не более определённого размера?

[Extramezz]

Григорий: чтобы картинка не была больше самого блока.

[Григорий]

Extramezz: при width:100% она не имеет права быть больше самого блока. И здесь я не вижу, чтобы она выходила за его пределы.

[Extramezz]

Григорий: истинный размер картинки может быть и меньше блока и тогда при width:100% она будет принудительно растягиваться на все 100%. Мне же нужно чтобы только если она больше блока, то тогда не выходила за его пределы.

[Григорий]

Extramezz: вот теперь понятно. Вобщем вот. У меня все как надо отображается.

[Extramezz]

Григорий: а можно подробнее? Что вы изменили?

[Григорий]

Extramezz: честно говоря ничего. Просто у вас картинка размером 1600x1200px, и в окне браузера она не помещалась, поэтому эффекта от max-width не было видна. Я для примера взял маленькую картинку, и эффект проявил себя.

Answer 3

[Андрей Федоров]

Потому что - это inline элемент. Т.е. его ширина в процентах берется от его истинной ширины и влияет только на ширину элемента, а не на ширину блока-контейнера.

Если вы хотите адаптивный дизайн - забудьте о теге img. Используете свойство css background.
пример

Comments

[Extramezz]

Просто это не часть дизайна - это часть контента. Интересно, почему именно в FF такая проблема...

[Андрей Федоров]

Хорошо, тогда так: jsfiddle.net/LayuLcm0/2

[Extramezz]

Андрей Федоров: необходимо не принудительное width:100% для картинки, а именно Максимальный размер:размер родителя.

[Андрей Федоров]

Скриншоты дайте как должно быть на разных размерах... У меня и ff и в хроме одинаково ведет себя ваш пример из вопроса при изменении размеров вьюпорта

[Extramezz]

Андрей Федоров:
В article ложится картинка - она может быть и маленькой и большой. Если она меньше .one по ширине, то ее размер должен быть каким он есть. Если больше - то размером с сам .one.

Я не знаю что тут скринить.

> У меня и ff и в хроме одинаково ведет себя ваш пример из вопроса при изменении размеров вьюпорта

Так вы замените width на max-width и все поймете.

[Андрей Федоров]

Заменил. Понятно. Сдаюсь, с разными размерами картинок вряд ли удастся без js такой адаптивности достичь...