如何使图像字幕宽度匹配图像宽度？ [英] How to make image caption width to match image width?

问题描述

我想尝试这样做：

<div class="figure">
  <img src="/some/image.jpg">
  <p class="caption">
    <span class="caption-text">Some caption of any length</span>
   </p>
</div>

因此，标题位于与图像宽度相同的阴影框中。请注意， .figure 有时可能位于表中的< td> 内，它也不应该超过父元素的宽度（缩放图像必要的）。

So that the caption is in a shaded box the same width as the image. Note that .figure can sometimes be inside a <td> in a table, in case that matters. It also shouldn't exceed the width of the parent element (scaling the image down in necessary).

这是我到目前为止：

.caption-text {
    font-size: 14px;
    font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
    font-weight: normal;
    line-height: 0px;    
}


.figure {
    max-width:100%;
    display: inline-block;
    position: relative;    
}

.figure img {
    vertical-align: top;
    margin-bottom: 3px;
}

.caption {
    display:block;
    width:100%;
    position: absolute;
    padding:10px;
    background-color:#e3e3e3;
    box-sizing:border-box;
    margin:0;
}

<div style="width:500px">

<h1>Some Title</h1>

    <!--part I want to style-->
    <div class="figure">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      <p class="caption">
        <span class="caption-text">Some caption of any length. Should wrap and push content down when longer than the image.</span>
       </p>
    </div>

    <p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p>
  
</div>

问题是， c $ c> .caption as position：absolute; 使它不再影响其他元素的流动，因此它覆盖其下面的内容，而不是

The problem is that putting the .caption as position:absolute; makes it no longer affect the flow of other elements, so it overlays content underneath it instead of pushing it down.

html标记是自动生成的，我没有办法编辑它，所以我想知道如果这可能与纯css 。

The html markup is automatically generated and I have no way of editing any of it, so I would like to know if this possible with pure css.

推荐答案

您可以使用CSS + table-caption 解决方案。

You could use the CSS table + table-caption solution.

.figure {
    display: table;
}
.figure img {
    width: 100%;
    height: auto;
}
.figure .caption {
    display: table-caption;
    caption-side: bottom;
}

JsFiddle Demo

.figure {
    display: table;
}
.figure img {
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 3px;
}
.figure .caption {
    display: table-caption;
    caption-side: bottom;
    background: #e3e3e3;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
}

<div style="width:500px;border:1px solid aqua;">
    <h2>Small Image</h2>
    <div class="figure">
        <img src="//placehold.it/300x100" />
        <p class="caption">Some caption of any length. Should wrap and push content down when longer than the image.</p>
    </div>
    <p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p>
</div>

<br/>

<div style="width:500px;border:1px solid aqua;">
    <h2>Big Image</h2>
    <div class="figure">
        <img src="//placehold.it/900x100" />
        <p class="caption">Some caption of any length. Should wrap and push content down when longer than the image.</p>
    </div>
    <p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p>
</div>

这篇关于如何使图像字幕宽度匹配图像宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！