如何使響應式圖像和標題相處？

在這種情況下，圖像符合響應式設計，但字幕不與它們一起調整。如何在代碼中設置max-width像素值？如何使響應式圖像和標題相處？

有兩個相同的圖片在一個section，每一個figure內有figcaption：

<section>  
    <figure> 
     <img src="link.jpg"> 
     <figcaption>Caption</figcaption> 
    </figure> 
    <figure> 
     <img src="link.png"> 
     <figcaption>Caption</figcaption> 
    </figure> 
</section>

In the CSS，我們已經設置了一些東西，但最重要的是，img有max-width: 100%集，但似乎沒有辦法使字幕做同樣的事情：

enter image description here

在考慮到舊版瀏覽器的響應式設計中，如何避免這種重疊？除了在figure或section元素上設置max-width: 300px。

注意，任何解決方案應該考慮到當使窗口小，它應該讓圖像變得更小：

enter image description here

換句話說，在auto margins應該去遠。（水平利潤率將在狹窄的視浪費空間。）

來源

2012-11-04 Baumr

到figcaption綁定到img的寬度，你需要來包裝他們都將崩潰到img的寬度的元素裏面，這種情況下，我已經使用了div：

<figure> 
    <div> 
     <img src="http://www.phibetaiota.net/wp-content/uploads/2012/10/Google-Data-Center.jpg"> 
     <figcaption>First example caption</figcaption> 
    </div> 
</figure>

隨着CSS：

section figure div { 
    position: relative; 
    display: inline-block; 
    max-width: 100%; 
    padding: 0; 
}

JS Fiddle demo。

您可能希望調整div的overflow屬性，顯然，適應口味。但是，如果要將figure元素保留爲100％寬度，則需要另一個元素來包含img和figcaption，以便將figcaption的寬度限制爲img的寬度。

來源

2012-11-05 18:00:11

感謝大衛，這是有道理的。但是，屏幕縮小時圖像被切斷，「溢出」解決方案僅啓用滾動條。此外，我添加了對原始問題的更新。 – Baumr

因此，您希望圖像本身縮小，以響應調整到較小的視口？ –

是的。而在較大的視口上，它們不應超過100％寬度，字幕也不應超過100％。（我注意到，在你的小提琴中的標題現在被底部的幾個'px'抵消了 - 可能是因爲div是一個'inline-block'吧？） – Baumr

我不知道我是否完全理解你想達到的目標，但是你在找什麼？ http://jsfiddle.net/XjthT/124/

我加了一個跨度周圍的IMG和字幕：

section figure span{ 
    display: inline-block; 
    position: relative; 
}

來源

2013-08-28 10:55:18

「除了設置max-width：300px之外'figure'或'section'元素「 – Baumr

@Baumr哦，對不起，沒有看到那部分。用新方法更新答案。 –

如何使響應式圖像和標題相處？

回答

相關問題