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

Question

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

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

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

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

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

КСС:

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

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

Answer 1

Вы говорите о просто установив размер Div? В CSS:

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

Вы также можете не установить изображение в вашем коде, но установить фон DIV образ «приставку» к этому образу вместо:

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

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

Answer 2

чтобы иметь div быть тот же элемент, как его ребенок img элемент:

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

div img { 
    margin: 0; 
} 

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

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

JS Fiddle proof-of-concept (for both).

Answer 3

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

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

, так что это будет в конечном итоге что-то вроде

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

надежды, что помогает.

Answer 4

использование img: блок. это все ....

Answer 5

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

img { 
    vertical-align:middle; 
} 

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

Answer 6

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

div { 
    display: flex; 
}