Image 如何获得<；img>；宽度与<；figcaption>；？

在响应式设计中，如何使

的宽度根据

的宽度进行调整，但不能超过它

---

设置<代码>最大宽度：100%；显示：内联块（）或

浮动：[left | right]

（）在

部分

会使其收缩以适应其内容（及其所在的框）。不过，您可能需要修改一些其他内容以适应这些更改

或者，尝试设置

宽度：100%；高度：自动，并在
图形上设置宽度
元素

（在
img
上设置
height:auto；
意味着无论
height
或
width
属性设置在
img
元素本身上，它都会保留其纵横比）
你能发布你的CSS吗。@Lokase，有一个JSFIDLE链接，但我也将相关的CSS包括在问题中（根据StackOverflow指南）谢谢Baumr，在第一次通读时没有看到JSFIDLE链接。javascript/jQuery解决方案是不可能的吗？还是你只想有一个CSS解决方案？是的，正在寻找一个好的、简单的跨浏览器友好的CSS解决方案。我更新了你的FIDLE，在
img
上设置
宽度：100%；高度：auto；
，并在de>max width

在图上显示。似乎有效，但当窗口变小时标题会转义（由于绝对定位）：谢谢。我正在寻找一种方法，可以避免设置

max width:200px

（在没有其他更改的情况下有效）-我应该编辑我的问题来强调吗？感谢您没有设置

图形{display:inline block；max width:100%；}

和

图形img{max width:100%；}

来实现这一点？例如，此时您遇到了CSS的限制：（你真的需要一个容器吗？在外部添加一个

不会影响语义；它实际上并不意味着什么（据我所知）。对于IE6/7，添加

zoom:1；

使

内联块

工作。我在IE7兼容模式下尝试过（手头没有真正的IE7），它看起来不错（当我添加最新的HTML5时）：

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

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