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

查看:143
本文介绍了如何使图像字幕宽度匹配图像宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想尝试这样做:

<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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆