Как справиться с адаптацией изображения height:100%; в mozilla firefox?

Рейтинг: 0Ответов: 2Опубликовано: 28.01.2015
#content img {
    border:solid 1px;
    border-color:#DBDBDB;
    height:100%;
    width:100%;
    padding:2px;
    position:center;

}
<div id="content">
<img src="">
</div>
html firefox
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Проблема возникает из-за padding, он делает высоту изображения 100% + 4px, напишите стили вот так и проблема должна решиться:

#content img {
    border:solid 1px;
    border-color:#DBDBDB;
    height:100%;
    width:100%;
    padding:2px;
    position:center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box;
}

С box-sizing: border-box; свойство padding будет входить в заданные 100%.

Сделал пример в сравнении с border-box и без и для наглядности покрасил родительский элемент красным фоном, визуально видно, что в варианте без border-box изображение вылезает за блок.

▲ 1
    $(document).ready(function($){ //запускаем, когда документ загрузится
    $("#content").height($(window).height()); //меняем высоту дива на высоту окна в первый раз, т.к. событие просто при открытии не вызывается
    });