實現圖片字幕的最佳方式是什麼？

我想實現帶有可以進入內容的字幕的圖像，可以左右對齊。實現圖片字幕的最佳方式是什麼？

父div具有動態寬度，圖像具有動態性。

如何實施？

我曾嘗試下一件事情：

<div class="col-lg-4"> 
    <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> 
</div>

但起初並不在FF工作的圖像具有寬度超過父div.col-LG-4使用這種方法那麼，圖像應具有固定的寬度，或具有顯示的父塊：表格。因此，使用該表和表標題屬性是沒有意義的。因爲你可以設置寬度而不使用它們。

來源

2013-10-28 Rantiev

要求「最好的方式」（甚至沒有指定標準）主要是基於意見的，尤其是因爲這裏有很多可能的方法。 –

是的，你是對的。 – Rantiev

假設這個問題的標題可以重寫爲「帶字幕的動態大小的圖像」或類似的東西 –

，所以你需要將它設置爲display: table和width: 1%（可能是1px的也可以）把它引起我的首選方法是使用figure和figcaption

http://jsfiddle.net/3n1gm4/rfsYy/

<figure> 
    <img src="animageURL.jpg" alt="an image" /> 

    <figcaption>The images caption woo woo</figcaption> 
</figure>

figure是一個塊級元素伸展但同時具有剛性

figure { 
    margin: 10px; 
    padding: 10px; 
    background: #ccc; 
    display: table; 
    float: left; 
    width: 1%; 
}

來源

2013-10-28 20:01:30

成像你有30個這樣的圖像，這些圖像不應該有寬度，以及他們的父塊，因爲我們有響應式佈局。你如何實現這一點。在我提到的問題中，該父塊和圖像應具有動態寬度。 – Rantiev

對於動態圖像尺寸，我會使用「'display：inline-block」來獲得動態尺寸「（就像在小提琴中那樣），我在代碼中給出的例子是用於固定大小的圖像。 –

感謝您的回覆，我明天會嘗試提琴手的鏈接。我認爲display：inline-block在父元素上不能使用長字幕，如果你的意思是顯示：inline-block for image，heh ...會嘗試，但看起來標題會出錯。 – Rantiev

由於m在這種情況下，圖/ figcaption是理想的。

JSFiddle

<div class="wrapper"> 
    <figure> 
     <img src="http://lorempixel.com/100/100/" alt=""/> 
     <figcaption>Text 1</figcaption> 
    </figure> 
    <figure> 
     <img src="http://lorempixel.com/200/200/" alt=""/> 
     <figcaption>Text 2</figcaption> 
    </figure> 
    <figure> 
     <img src="http://lorempixel.com/50/50/" alt=""/> 
     <figcaption>Text 3</figcaption> 
    </figure> 

</div>

對於響應速度，設定附圖來inline-block。

.wrapper { /* just an example */ 
    width:90%; 
    border:1px solid grey; 
} 

figure { 
    display:inline-block; 
    vertical-align:top; 
} 

figure img { 
    display:block; 
}

來源

2013-10-28 20:28:20

謝謝，明天會試試，並會回覆。 – Rantiev

以下是帶有較長字幕的示例http://jsfiddle.net/KMctL/1/ – Rantiev

以下是以圖片爲中心的快速更新。 http://jsfiddle.net/Paulie_D/KMctL/2/顯然，如果你想限制任何寬度，你必須手動應用它。 –

實現圖片字幕的最佳方式是什麼？

回答

相關問題