Как подобрать div к изображению?

Question

У меня есть жидкое изображение внутри div, под изображением есть другой div с текстом. Возможно ли, чтобы #text div получал тот же размер, что и изображение?

<div id="container"> 
    <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg"> 
    <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div> 
</div> 


#container { 
    display: inline-block; 
    height: auto; 
    max-width: 100%; 
    position: relative; 
} 

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

FIDDLE

Answer 1

Here is the answer on JSFIDDLE
Вы должны добавить position:absolute к вашему <div id="text">..</div>:

Вот CSS, вы должны применять:

#text{ 
    position:absolute; 
    bottom:0;left:0; 
    width:100%; 
    background:#444; 
    color:#FFF; 
    text-align:center; 
    font-size:11px; 
    line-height:14px; 
    padding:2px 0; 
} 

Answer 2

попробовать это FIDDLE

#container { 
    display: inline-block; 
    height: auto; 
    max-width: 100%; 
    position: relative; 
} 

img { 
    max-width:100%; max-height:100%; 
} 
#text{ 
    max-width:300px; 

} 

Answer 3

Видя, как #container позиционирован относительно, можно расположить #text абсолютно, чтобы предотвратить его от растягивания #container:

#text { 
    /* remove from flow, prevents from stretching container */ 
    position: absolute; 
} 

http://jsfiddle.net/HUsRm/5/

Это, конечно же, также предотвращает вертикальное растяжение, а не нажимает нижеследующий контент вниз. Это может быть нежелательно?

Answer 4

Адрес fiddle link. Вам просто нужно предоставить позицию для текстового div.

#text { 
    position:absolute; 
} 

Answer 5

Вы можете сделать эту работу, имея только этот CSS:

#container 
{ 
    display:table-caption; 
} 

Fiddle

Answer 6

Я хотел бы предложить вам использовать соответствующие теги: фигура и figcaption, во всяком случае здесь чистое решение, которое работает с разметкой, вы можете увидеть результаты в этом FIDDLE.

figure, #container { 
      display: table; 
      max-width: 100%; 
      width: auto !important; 
      } 

     img { 
      display: table-row; 
      max-width: 100%; 
      width:100%; 
     } 

     figcaption, #text { 
      display: table-caption; 
      max-width: inherit; 
      caption-side: bottom; 
      word-wrap: break-word; 
     } 

    <!--[if lt IE 9]><style type="text/css"> 
    img, 
    figcaption { 
     width: auto !important; 
    } 
    </style><![endif]--> 
    <figure> 
     <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" /> 
     <figcaption>Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</figcaption> 
    </figure> 
<!-- YOUR MARKUP #2 --> 
    <div id="container"> 
     <img src="http://dummyimage.com/300x200/c7c1c7/fff.jpg" alt="alt text" /> 
     <div id="text">Several standard dimensions are included in dummyimage.com including ad sizes and screen resolution sizes.</div> 

    </div> 

Я хотел бы также предложить взглянуть на this blog post для лучшего изображения размер