Ширина подписи изображения до изображения

Как я могу сделать ширину заголовка изображения такой же, как и изображение? Теперь у меня есть следующий код:

<div class="image">
    <img src="foo.jpg" alt="" />
    <div>This is the caption.</div>
</div>

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

Ответ 1

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

В моем случае я применил display:table к родительскому элементу и применил display:table-caption и caption-side:bottom к элементу caption как это:

<div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>

Ответ 2

Вы можете применить display:table; и произвольную начальную ширину, например. width:7px; к родительскому блоку, например figure, и все будет работать так, как ожидалось!

Вот живая демонстрация: http://jsfiddle.net/blaker/8snwd/

Это ограничение ограничено тем, что IE 7 и более ранние версии не поддерживают display:table;, а для IE8 ваш тип doctype должен быть !DOCTYPE.

Источники:

http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
W3Schools (не удается отправить ссылку из-за ограничения на стекирование 2-link для людей с менее чем 10 репутацией)

Ответ 3

Если проблема заключается в том, что заголовок слишком длинный, вы всегда можете использовать


div.image {
    width: 200px; /* the width you want */
    max-width: 200px; /* same as above */ 
}
div.image div {
    width: 100%;
}

И заголовок останется неподвижным. Кроме того, имя тега - img, а не изображение.

Или, если вы хотите определить ширину вашего изображения, вы можете использовать jQuery:


$(document).ready(function() {
    var imgWidth = $('.image img').width();
    $('.image div').css({width: imgWidth});
});

Таким образом, вы получите ширину изображения, а затем установите для него ширину надписи.

Ответ 4

Ключ должен обрабатывать изображение как имеющее определенную ширину некоторой длины. В приведенном ниже примере я проверил, и мое изображение было шириной 200 пикселей. Затем обработайте заголовок как встроенный блок.

HTML:

<div style="width:200px;">
   <img src="anImage.png" alt="Image description"/>
   <div class="caption">This can be as long as you want.</div>
</div>

CSS

.caption {
   display: inline-block;
}

Вы также можете заменить встроенный блок текстом, который выравнивается слева направо или растягивается по точной ширине изображения, заменяя выше css одним из следующих:

.caption {
   /* text-align: left; */
   /* text-align: right; */
   text-align: justify;
}

Ответ 5

Единственный способ правильной подписи - заключить изображение и подпись в таблицу, созданную из элементов span, с атрибутами css таблицы, таблицы и таблицы cc.

Любой другой метод (включая теги фигур HTML5) либо дает несоответствие ширины, либо вызывает нежелательные разрывы строк.

Если ваш метод должен работать в браузере, отличном от css3, то, вероятно, лучше всего подходит таблица.

Ответ 6

Вы можете попробовать установить обертку div div display:inline-block

http://jsfiddle.net/steweb/98Xvr/

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