отзывчивый img в firefox с контейнером максимальной ширины

Нужен отзывчивый img внутри контейнера с максимальной шириной.отзывчивый img в firefox с контейнером максимальной ширины

HTML:

<div class="center-content"> 
    <img src="assets/test-slider.png" alt="" /> 
</div>

CSS:

/*center-content*/ 
.center-content{ 
    position:relative; 
    max-width:1200px; 
    margin:0 auto;} 


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

Это прекрасно работает в -webkit, но не в Firefox ...

Любая помощь будет оценена.

/EDIT/

http://jsfiddle.net/WKHHR/

Проверьте разницу между Firefox & Chrome

источник

2013-05-31 ronni

любая демо или скрипка вашего кода будет оценена. – Nitesh

Пожалуйста, объясните, что не работает. –

При изменении размера браузера до 1200px img stay в оригинальном размере. В Chrome и Safarie он изменяет размер в соответствии с браузером. – ronni

СМЧ для изображения неправильно вместо

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

поставил

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

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

источник

2013-05-31 12:46:45 MarkP

Его всегда то, что просто ... Работая на том же коде, я думаю, THNX! – ronni

это также работало для меня при встраивании изображений в Zurb Foundation. На firefox они не изменяли размер и, таким образом, не выходили из своих колонок. – KingFu

это может сработать, но это не универсальный ответ. 'max-width' не совпадает с' width'. В общем случае неправильная установка ширины установки на 100% - это не должно устанавливаться глобально и должно устанавливаться только на изображениях, где это явно требуется. С другой стороны, максимальная ширина до 100% в глобальном масштабе является хорошим дефолтом. – Larry

отзывчивый img в firefox с контейнером максимальной ширины

ответ

Смежные вопросы