Неверная высота div с тегом img внутри

У меня есть div с тегом изображения внутри, а высота div немного больше, чем изображение.

Я мог бы исправить эту проблему, установив определенную высоту для div (так же, как и изображение), но я работаю с отзывчивым макетом, и я не хочу устанавливать определенную высоту для div, поэтому что, когда окно браузера масштабируется (например, в мобильных устройствах), div будет масштабировать и поддерживать соотношение.

Мне нужно, чтобы высота div была точно такой же, как высота изображения.

Это сценарий:

<div class='box'><img src='image.jpg'></div>

Css:

img { height: auto; max-width: 100%; width: auto; }

Кто-нибудь знает, как исправить эту проблему?

Ответ 1

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

либо это, либо вы можете поиграть с краем обрушения на изображении, если вы действительно не хотите его плавать. Однако это решение, которое, вероятно, вызовет больше проблем в конце.

чтобы он оказался чем-то вроде

.box img {
  display: block; /*inline block would be fine too*/
  float: left;
}

надеюсь, что это поможет.

Ответ 2

Самый простой способ - определить вертикальное выравнивание изображения.

img {
  vertical-align:middle;
}

http://jsbin.com/xozatu/edit?html,css,output

Ответ 3

Чтобы div был тем же самым элементом, что и его дочерний элемент img:

div {
    display: inline-block;
    padding: 0;
}

div img {
    margin: 0;
}

Я бы предположил, что вместо div вы используете span (таким образом, он автоматически "скроет" его ширину до ширины его содержимого:

span {
    padding: 0;
}
span img {
    margin: 0;
}

JS Fiddle доказательство концепции (для обоих).

Ответ 4

используйте img: block. что все....

Ответ 5

Вы говорите только о настройке размера Div? В css:

.box
{
 height: 10px;
 width:10px;
}

Вы также не можете установить изображение в своем коде, но вместо этого установите фоновое изображение "box" DIV на это изображение:

.box
{
 height: 10px;
 width:10px;
 background:url('/imgURL/filename.gif') white no-repeat;
}

(10px - это просто случайное число. Установите его на любой размер, который вам нужен)

Ответ 6

Простое современное решение, которое работает, выглядит следующим образом

div {
    display: flex;
}