Ширина подписи к изображению такая же, как у изображения - PullRequest
22 голосов
/ 12 февраля 2011

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

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

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

Ответы [ 6 ]

37 голосов
/ 01 октября 2013

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

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

<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>
6 голосов
/ 10 августа 2012

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

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

Ограничение этого решения заключается в том, что IE 7 и более ранние версии неподдержка display:table; и IE 8 требует, чтобы ваш тип документа был !DOCTYPE.

Источники:

2 голосов
/ 12 февраля 2011

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


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

И заголовок останется статичным.Кроме того, имя тега img, а не image.

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


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

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

0 голосов
/ 04 июля 2015

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

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

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

0 голосов
/ 04 ноября 2014

Ключ в том, чтобы рассматривать изображение как имеющее определенную ширину и длину.В приведенном ниже примере я проверил, и мое изображение было шириной 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;
}
0 голосов
/ 12 февраля 2011

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

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

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

...