image - 如何获得与相同的宽度?

Question

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

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

相应的CSS只限制<img>而不限制<figcaption>，见：

如何在不使用（或 12.5em）容器的情况下将<figcaption>与 一起限制？<img>max-width: 200px<figure>

---

以下是 CSS 的重要部分（完整的 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;
}

Answer 1

设置max-width: 100%; display: inline-block;（http://jsfiddle.net/vZpmq/1/）或float: [left|right]（http://jsfiddle.net/cdmU3/1/）section会导致它缩小以适应它的内容（和它所在的盒子） . 不过，您可能需要修改其他一些东西以适应这些更改。

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

（设置意味着它保留它的纵横比，而不考虑height: auto;元素本身的属性）imgheightwidthimg