如何將figcaption格式化爲不拉伸最小寬度的數字

Question

我使用以下標記來呈現圖像及其標題。

HTML：

<div class="fig-container"> 
    <figure class="captioned-figure"> 
     <img class="full-width" src="..."/> 
     <figcaption> 
      TEXT TEXT TEXT 
     </figcaption> 
    </figure> 
</div> 

CSS：

.fig-container{ 
    text-align: center; 
} 

.captioned-figure{ 
    display: inline-block; 
    min-width: 50%; 
} 

.full-width{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

我的目標是具有水平居中和縮放到視區的至少50％的圖像，但不超過100％。 標題應與圖像對齊，並應根據縮放的圖像大小進行包裝。

當figcaption文字短 - 一切都很好。這些圖片可以放大到50％，縮小到100％，或留在他們的原生水庫。

但是當figcaption文本太長（一行中寬度超過50％），圖像很小（窄於50％）時，figcaption會設置圖形元素的實際寬度，並縮放圖像因此。

Answer 1

最好的/最快的解決方案是將max-width: 50%添加到.captioned-figure元素。

.fig-container { 
 
    text-align: center; 
 
} 
 

 
.captioned-figure { 
 
    display: inline-block; 
 
    min-width: 50%; 
 
    max-width: 50% 
 
} 
 

 
.full-width { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="fig-container"> 
 
    <figure class="captioned-figure"> 
 
     <img class="full-width" src="http://25.media.tumblr.com/tumblr_lhp4ibjZlc1qgnva2o1_500.jpg"/> 
 
     <figcaption> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laboriosam earum obcaecati incidunt consequatur non molestiae voluptas ratione hic commodi, iure nobis asperiores. Similique, cupiditate, rerum! Aliquid, repellendus itaque amet! 
 
     </figcaption> 
 
    
 
    </figure> 
 
</div>

你覺得呢？

Answer 2

我找到了解決方案採用直列表：

HTML：

<div class="fig-container"> 
    <figure class="captioned-figure"> 
     <img class="full-width" src="..."/> 
     <figcaption class="img-subtitle"> 
      TEXT TEXT TEXT 
     </figcaption> 
    </figure> 
</div> 

CSS：

.fig-container{ 
    text-align: center; 
} 

.captioned-figure{ 
    display: inline-table; 
    min-width: 50%; 
} 

.full-width{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.img-subtitle{ 
    display: table-caption; 
    caption-side: bottom; 
}