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

问题描述

在响应式设计中，如何根据< img>的宽度调整< figcaption> 的宽度; ，但不超过它？

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

）：

 截面图{
 position：relative; 
 margin：0 auto; / * to center it * / 
} 
 
 section figure img {
 max-width：100％; 
 vertical-align：middle; / *确保图像的行为像块* / 
} 
 
 section figure figcaption {
 position：absolute; 
右：0; bottom：0; left：0; 
} 
  

解决方案

设定 max-width：100％; display：inline-block; （ http://jsfiddle.net/vZpmq/1/ ）或 float：[left | right] （ http://jsfiddle.net/cdmU3/1/ ）在部分会导致它缩小到适合它的内容（和框在）。

也可以尝试设置 width：100％; height：auto; 在img上，并设置 figure 元素的宽度？ http://jsfiddle.net/9yUsP/

意味着它保留它的长宽比，而不管是否设置 height：auto; 元素本身设置的高度或宽度属性）

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>与< figcaption&gt ;?具有相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！