Firefox - изображения максимальной ширины не работают в fieldset

Question

Я работаю над большой формой и заметил, что если изображение находится внутри поля, оно не подчиняется правилу max-width: 100%.

Он работает как в Chrome, так и в Safari, но в Firefox изображение переполняет контейнер, и изображение сохраняет нормальный размер.

Я бы предпочел не вносить изменения в структуру html и сохранять изображения внутри полей.

У кого-нибудь есть идеи, если есть обходной путь или почему это происходит только в Firefox?

простой пример
http://codepen.io/FernE97/pen/NPZKaR

Answer 1

Для чисто CSS решение, проверьте эту ссылку http://codepen.io/saig/pen/RNXLwY Испытано с 800x400 и 400x400 изображения размером

img { 
    width: 100%; 
    max-width: -moz-fit-content; 
    max-width: -webkit-fit-content; 
    height: auto; 
} 

Вы можете проверить это соединение для макс ширины реализации по MDN https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples

Answer 2

Вы можете попробовать это временное решение, определяемое свойство ширины. использовать максимальную ширину, чтобы переопределяет свойство ширины

img { 
    width: 100%; 
    max-width: 100%; 
    height: auto; 
} 

Edit: Пожалуйста, проверьте этот адрес: http://codepen.io/anon/pen/PwrWQK Я добавил скрипт, который динамически изменяется макс-свойства ширины на основе измерения изображения, надеюсь, что это помогает устранить проблему в Firefox ,