Почему изображение с display: block выходит за рамки блока родителя?

Question

[Senseich]

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

Суть вопроса: есть блок c шириной скажем 300px, в нём изображение c шириной 340px. Изображение выйдет за рамки блока, т.к. это особенность изображений. Но почему если изображению задать display: block , то оно так же выходит за рамки. Ведь из определения блочного элемента:

Он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить его внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

В данном случае изображение блочный элемент внутри контейнера блочного, почему тогда выезжает?
Вот для примерчика: https://jsfiddle.net/193x2jgc/
Понятно, что width: 100%; для изображения будет всё работать, но почему без width не работает, это же 2 блочных элемента?
Где правда? )

Answer 1

[Stalker_RED]

Все верно, абстрактный элемент с display: block по умолчанию имеет ширину 100%. Но вы же явно указали, что у него должна быть ширина 300px, а не 100%.

Для изображения, вы указали display: block, но это же изображение, у него есть "родная" ширина, полученная из самой картинки, и она 340px.

А вот этот зеленый растянулся на 100% https://jsfiddle.net/193x2jgc/1/

Comments

[Senseich]

@Stalker_RED

Все верно, абстрактный элемент с display: block по умолчанию имеет ширину 100%. Но вы же явно указали, что у него должна быть ширина 300px, а не 100%.

Тут не совсем понял, абстрактный элемент имеется ввиду изображение? Вы пишите, что я явно указали, что у него должна быть ширина 300px. Но я ведь для изображения не указывал ширины вообще, получается для тэга <img> при display: block по умолчанию не имеет ширину 100%, как у других блочных элементов, а имеет ширину самой картинки. Так что ли?

[Орхан Гасанлы]

Senseich, по идее так и есть. и если отдельно указать ширину 100% для изображения, то получите следующий результат:

.block img {
  width:100%;
}

https://jsfiddle.net/193x2jgc/2/

[Stalker_RED]

Senseich, у вас там два блочных элемента, и одному вы явно указали 300px, а у другого (у картинки) ширина 340, которая получена из самого изображения.
Я добавил третий блок (зеленый), и он автоматически получил ширину 100%, как и было сказано.

Он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить его внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

[Senseich]

Stalker_RED, вобщем то понятно, что изображение это изображение и ему нужно 100% указывать )

[Сергей delphinpro]

Senseich, тег img является замещаемым
Такие элементы немного по-другому себя ведут, нежели другие.

[Senseich]

Сергей delphinpro, а почему пишут что input, button, select, textarea тоже замещаемые элементы?
Если img ещё понятно, там определяется размерами изображения, а эти элементы почему замещаемые, они же из вне ничего не подтягивают )?

[Сергей delphinpro]

Senseich, это системные элементы. относящиеся к операционной системе.

Замещаемый, это не значит "подтягивающий из вне" =))

[Senseich]

Сергей delphinpro, хм, интересно, надо подразобраться в этом вопросе

Answer 2

[Jumandjilos]

Короче, задай изображению max-width: 100%; Оно займёт весь блок, а также будет адаптивным.