Подключить <div> к закрытому изображению?

Ситуация заключается в том, что у меня есть img, и я хочу использовать поле заголовка pop-over, ширина которого равна ширине img. Я не могу добавить подпись как дочерний элемент img, потому что теги img не принимают детей. Поэтому моя идея состояла в том, чтобы иметь что-то вроде этого:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

Проблема заключается в том, что внешние div расширяются, чтобы заполнить ширину их родительского элемента, так как блокируют элементы, и, следовательно, caption-div становится одинаково широким, и я получаю что-то похожее на это:

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

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

Ответ 1

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

Вам нужно display: inline-block в сочетании с text-align: center.

Смотрите: http://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">
    <div>
        <img src=".." />
        <span>...caption...</span>
    </div>
</div>

CSS

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}

Ответ 2

Возможно, просто сделайте ширину div 1px и сделайте overflow: visible

Ответ 3

Это он. В отличие от ответа выше, он будет работать в IE:

<style type="text/css">
     .outerCont {height:auto;width:auto;position:relative;z-index:1;margin:0px auto;overflow:hidden;display:inline;float:left;}
     .outerCont img {height:auto;width:auto;position:relative;z-index:2;}
     .comment {height:auto;width:100%;display:block;font-family:Arial, Helvetica, sans-serif;text-align:center;padding:10px;0px;10px;0px;color:#FFF;position:absolute;z-index:3;bottom:0;/*also set your semi transparent black background-image here using the background-image property*/}
 </style>

Вы бы использовали его следующим образом:

<div class="outerCont">
    <img src="flower.jpg" /> <!--Or where ever the image is located -->
    <div class="comment">
        <p>Hello</p>
    </div>
</div>

Единственная проблема, связанная с вышеперечисленными способами (мой и другой чувак), заключается в том, что вы жертвуете центрированием изображения. Чтобы центрировать изображение, вам нужно будет создать JavaScript с помощью jQuery и использовать свойство CSS для изменения ширины и высоты в соответствии с внутренним контентом. То, о чем вы просите, - это "Сжать обертку" на содержимое, которое вы можете сделать только в трех особых случаях. Плавающие объекты, объекты Inline или Inline-Block, а также Абсолютно позиционированные объекты. Оба объекта Floated и Absolute не могут быть центрированы без использования JavaScript, а Inline Block не действует корректно в IE, то есть вам нужно использовать display: inline; плыть налево; чтобы он работал как встроенный блок. Вы можете центрировать изображение с помощью JavaScript и что это. Я могу предоставить этот код, но только по запросу.