@Extramezz

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

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

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

Почему?

jsfiddle.net/2mrn5epp/3

В FF проверяю, если что. В хроме все нормально.
  • Вопрос задан
  • 500 просмотров
Решения вопроса 1
andykov
@andykov
Shit happens
Это баг 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
grigruss
@grigruss
Пока не задал ни одного вопроса... только отвечаю.
Масло масляное... width - ширина, max-width - максимально возможная ширина. Не понятно чего хотите...
Если картинка должна быть по размеру блока, достаточно width:100%.
Если речь о размере картинки без учета блока - здесь написано.
Если хотите ограничить определённым размером картинку внутри блока, тогда значение max-width не должно быть в процентах. Указывайте в px, в em, cm, mm или чем то еще более конкретном.
Ответ написан
aliencash
@aliencash
Партизан
Потому что - это inline элемент. Т.е. его ширина в процентах берется от его истинной ширины и влияет только на ширину элемента, а не на ширину блока-контейнера.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы