How to get <img> to be the same width as <figcaption>?

删除回忆录丶 提交于 2020-01-30 08:14:29

问题


In a responsive design, how can the width of a <figcaption> be made to adjust according to the width of the <img>, but not exceed it?

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

The corresponding CSS only limits the <img> and not the <figcaption>, see:

How can the <figcaption> be constrained along with the <img>, without using max-width: 200px (or 12.5em) on the <figure> container?



Here are the important bits of CSS (full on JSFiddle):

section figure {
    position: relative;
    margin: 0 auto; /* to center it */
}

section figure img {
    max-width: 100%;
    vertical-align: middle; /* to make sure images behave like blocks */
}

section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
}

回答1:


Setting max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) or float: [left|right] (http://jsfiddle.net/cdmU3/1/) on the section would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.

Alternatively, try setting width: 100%; height: auto; on the img, and set the width on the figure element? http://jsfiddle.net/9yUsP/

(setting height: auto; on the img means it's retain it's aspect ratio regardless of height or width attributes set on the img element itself)



来源:https://stackoverflow.com/questions/13705616/how-to-get-img-to-be-the-same-width-as-figcaption

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!