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

Question

[Анастасия]

Здравствуйте. Нужно сделать, чтобы изображение было

img {
   max-height: 50vw;
   max-width: 70vw;
}

однако, почему-то (чутьё подсказывает, что виновен picture) внизу появляется отступ в несколько пикселей
https://jsfiddle.net/uhq39y0f/

По моей логике: нужно выдать параметры img самому picture, а для img сделать height 100%, НО ТАК ПОЧЕМУ-ТО НЕ РАБОТАЕТ!

Comments

[Сергей Сергей]

display: block; для img

[Сергей delphinpro]

Вот эту книжку прочитайте. Она не большая и бесплатная.
https://css-live.ru/articles/obzor-inlajnovyj-kont...

Answer 1

[Pavel-ww]

Здравствуйте. Виновен не picture, а стандартные стили браузера, которые обычно сбрасываются с помощью normalize.css.
Сброс стилей браузера для img решит проблему.

img {
    vertical-align: middle;
}

display: block; для img тоже сработает, но это костыль в данном контексте. Вдруг вам где-то дальше не нужен будет display: block; , тогда придется его постоянно сбрасывать.

Всегда подключайте normalize.css чтобы не бороться с приведениями браузерных стилей