如何获取<img>与 &lt;figcaption&gt; 的宽度相同? [英] How to get &lt;img&gt; to be the same width as &lt;figcaption&gt;?

问题描述

在响应式设计中，如何让

的宽度根据的宽度进行调整，但不超过它吗?

 
<图><img src="link.jpg"><figcaption>Caption</figcaption></图></节>

):

截面图{位置:相对；边距:0 自动；/* 居中 */}剖面图 img {最大宽度:100%；垂直对齐:中间；/* 确保图像表现得像块 */}剖面图 figcaption {位置:绝对；右:0；底部:0；左:0；}

解决方案

Setting max-width: 100%;display: inline-block; (http://jsfiddle.net/vZpmq/1/) 或 float: [left|right] (http://jsfiddle.net/section 上的 cdmU3/1/) 会导致它缩小以适应它的内容(以及它所在的盒子).不过，您可能需要重新设计一些其他内容以适应这些更改.

或者，尝试设置 width: 100%;height: auto; 在 img 上，并在 figure 元素上设置宽度?http://jsfiddle.net/9yUsP/

(在 img 上设置 height: auto; 意味着无论height 还是 width 都保留它的纵横比> 在 img 元素本身上设置的属性)

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;
}

解决方案

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)

这篇关于如何获取<img>与 &lt;figcaption&gt; 的宽度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！