Почему картинки не подстраиваются под блок-родитель?

Question

[Александр]

Объясните, что за бред происходит. Есть блоки внутри которых картинки . Когда я задаю max-width 300px блоку родителю, то и картинка внутри блока должна сжаться по ширине , box-sizing: border-box Стоит. причем я задал бордер 1px , соотвественно минут 2 px от ширины и того картинка должна стать 298px внутри блоков. НО она стоит хрен пойми как . что это !?
https://codepen.io/AlexandrDevZ/pen/ZNEKKG?editors=1100

Comments

[RAX7]

img {
  width: 100%;
  vertical-align: middle;
}

[Rustam Bainazarov]

RAX7, лучше max-width: 100%;

[RAX7]

Рустам Байназаров, так ему нужно подогнать размер под родителя. Хотя пускай сам решает как оно лучше

[Rustam Bainazarov]

RAX7, есть смысл в твоих словах.

Александр, в качестве универсального глобального сброса стилей ставьте max-width: 100%, чтобы картинка не расстягивалась больше своих собственных размеров и размеров родителя. И ставьте локально width: 100%, чтобы картинка расстягивалась ровно под родителя, даже если она меньше/больше его.

[Александр]

Рустам Байназаров, ну если задать max-width 100 %? то да .По ширине встает как надо, но откуда этот зазор снизу между картинкой и границей блока?
https://codepen.io/AlexandrDevZ/pen/ZNEKKG?editors=1100

[Rustam Bainazarov]

Александр, вам уже RAX7 написал в примере.

Добавьте vertical-align: middle;

Ещё данная проблема решается добавлением display: block; — но это плохая практика для сброса, потому что тогда там, где нужно обтекание картинки или другие штуки, его не будет. Поэтому добавляйте vertical-align: middle;

img {
  max-width: 100%;
  vertical-align: middle;
}

[Александр]

Рустам Байназаров, да? Меня учили дисплей блок всегда. Попробую вертикал элайн никогда его не использовал

[Rustam Bainazarov]

Александр, кто вас учил делать сброс, который ломает изначальную логику отображения элемента? Посмотрите сбросы на сайтах, block'ом редко когда делают. Лучше точечно это делать.

Answer 1

[galkan]

Картинки имею свою ширину, а начинают подстраиваться под ширину родителя, только когда у них будет width: 100% или max-width: 100%.

Comments

[Александр]

ну если задать max-width 100 %? то да .По ширине встает как надо, но откуда этот зазор снизу между картинкой и границей блока?
https://codepen.io/AlexandrDevZ/pen/ZNEKKG?editors=1100

[galkan]

Как там правильно, кажется так. По умолчанию тег img имеет display: inline-block и как строчный элемент выравнивается по своим правилам. Чтобы убрать нижний зазор, добавьте ему display: block;

[Максим]

Александр, там же нету зазора ..в чём вопрос ?

[Rustam Bainazarov]

galkan, лучше vertical-align: middle; — чтобы не делать картинки блочныии там, где не нужно, и чтобы убрать зазор.

[Александр]

Максим Ленский, Есть. я дисплей блок прописал и прошло