Wie passt div zu Bild?

Question

Ich habe ein flüssiges Bild in einem div, unter dem Bild eine andere div dort mit Text. Ist es möglich, dass das #text div dieselbe Größe wie das Bild erhält?

<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
Sie benötigen ein position:absolute zu Ihrem <div id="text">..</div> hinzuzufügen:

Hier ist die CSS sollten Sie sich bewerben:

#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

versuchen diese 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

als #container Sehen relativ positioniert ist, könnten Sie die #text absolut zu positionieren, um es zu verhindern, dass das Strecken des #container:

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

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

Dies wird natürlich verhindern auch vertikale Dehnung, und nicht folgenden Inhalt nach unten drücken. Dies könnte unerwünscht sein?

Answer 4

Hier ist Ihre fiddle link. Sie müssen nur die Position für Text div angeben.

#text { 
    position:absolute; 
} 

Answer 5

Sie können diese Arbeit machen, indem nur diese CSS mit:

#container 
{ 
    display:table-caption; 
} 

Fiddle

Answer 6

Ich würde Ihnen vorschlagen, die richtigen Tags zu verwenden: Figur und figcaption, hier sowieso ist eine saubere Lösung, die auch mit Ihrem Markup funktioniert, können Sie die Ergebnisse in diesem FIDDLE sehen.

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> 

ich auch einen Blick auf this blog post für ein besseres Bild nehmen würde vorschlagen, die Größe