Изображение над div и не имеет такого же отношения с родителем div. Исправить с Firefox и IE9

У меня есть код, как ссылка (jsfidde) здесь.Изображение над div и не имеет такого же отношения с родителем div. Исправить с Firefox и IE9

Простой:

<div class="box"> 
    <img width="600" height="300" src="img.jpg"/> 
</div> 

.box{width:500px;} 
.box img{max-width:100%;}

Изображение фиксируется с помощью постоянного размера (ширины и высоты). Для вышеупомянутого дизайна Chrome работает хорошо, но Firefox и IE являются ошибками (изображение поверх float вне div). Помогите мне решить это. Спасибо всем предложениям.

источник

2013-10-10 Minh Anh

Если вы хотите установить ширину изображения по стилю, вы должны изменить img на элемент блока ... 'img {display: block; } 'ok .. :) –

try:' .box {width: 500px;} .box img {width: 100%;} ' – ncm

На самом деле, я не знаю, какой браузер подходит именно для этого обстоятельства. Я могу дать ему следовать по ширине. Спасибо вам. –

попробовать: Я думаю, этого было бы достаточно.

.box{width:500px;} 
.box img{width:100%;}

источник

2013-10-10 05:54:45 ncm

У меня такое же мышление с вами. Спасибо. –

ваш приветствие. (-: - ваша проблема решена? – ncm

imsiso. Конечно, ваш ответ проголосовали в лучшем случае. –

добавить это в вашем CSS, это получает изображение обратно

img 
{ 
height:auto; 
width:auto; 
display:block; 
}

или

.box-content{padding:10px; height:auto; width:100%;} 
.box-content img{max-width:95%; text-align:center; height:auto; width:100%;}

добавил width:100% к коробке

Updated Demo

источник

2013-10-10 05:50:40 Rex

ваша демоверсия переполнена. :) –

приятная работа, но я думаю, что нет необходимости ставить их просто 'width: 100%' будет достаточно. – ncm

@imsiso thanks обновил скрипку – Rex

Изображение над div и не имеет такого же отношения с родителем div. Исправить с Firefox и IE9

ответ

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