div {display: table;} не растягивает div, чтобы соответствовать изображению

У меня есть изображения и титры, и я бы хотел, чтобы титры были не шире изображений. This jsfiddle показан рабочий пример.div {display: table;} не растягивает div, чтобы соответствовать изображению

Основная хитрость здесь

div.img{ 
overflow:hidden; 
width:1px; 
display:table; 
}

Кажется, что display:table; вызывает DIV, чтобы растянуть до ширины изображения, даже если ширина была определена как 1px. Я использую это, потому что ширина изображения изменяется и может растягиваться в зависимости от ширины видового экрана.

Пока все хорошо. Однако на локальной странице трюк не работает. div действительно отображается как 1px в ширину. Как ни странно, a (казалось бы) сопоставимый divделает показывает правильное поведение. Я не уверен, как продемонстрировать страницу проблемы, потому что это локальная страница с довольно html/css и изображениями ... Я буду более чем рад придумать скриншоты или (тонну) css, если это возможно помогите отладки.

Я не вижу разницы между функционированием и не функционирующим div s в консоли Firefox. Кто-нибудь знает, на что смотреть?

enter image description here

источник

2014-02-14 RubenGeert

P.S. совершенно другой подход к ширине заголовка изображения был бы очень желанным, если надпись может быть полностью исключена, не нарушая ничего. – RubenGeert

попробуйте использовать 'max-width' вместо этого. –

Нашел проблему: изображение просто не было загружено. Крошечный «образ», отображаемый браузером, является границей изображения, которая все еще присутствует с отсутствием самого изображения. Не пришло в голову, что это может быть виновником, но в любом случае: проблема решена :-) – RubenGeert

Существует решение с помощью CSS3:

div.img { 
    width: -moz-min-content; 
    width: -webkit-min-content; 
    width: min-content; 
}

Fiddle

div {display: table;} не растягивает div, чтобы соответствовать изображению

ответ

Смежные вопросы