说我有以下
HTML：
<figure> <img alt="Sun" src="sun.gif" width="256" height="256" /> <figcaption>The Sun - a sinister and destructive force. Image from the SOHO research facility.</figcaption> </figure>
如果我想要的文本包装到图像的宽度,我需要这个CSS：
figure {
display: table;
width: 1px;
}
如果我想让图像“响应” – 那就是不要比视口大 – 我也需要这个CSS：
img {
max-width: 100%;
}
但结合这两个结果可怕的混乱！现在,img的父级有一个明确的宽度集,最大宽度导致整个数字真的很小(虽然不是1px).
那么可以使用CSS(2或3)来实现包含在不比图像宽的图像标题和不比视口宽的图像？
解决方法
老问题,但是我遇到了同样的问题,并且能够拿出
a fairly neat solution,灵感来自
this.
HTML：
<figure> <img src="http://www.placehold.it/300x150" alt="" /> <figcaption>Make me as long as you like</figcaption> </figure>
CSS：
figure {
background-color: #fff;
padding: 5px;
font-size: .875em;
display: table;
}
figure img {
display: block;
width: 100%;
}
figcaption {
display: table-caption;
caption-side: bottom;
background: #fff;
padding: 0 5px 5px;
}
这样可以确保图形不超过图形的宽度,同时允许您在图像上保留最大宽度.所有的浏览器和IE8都可以使用.
有一个Firefox bug可以防止在设置为显示：table的元素中工作的最大宽度.所以,不要在图像上使用max-width,而是将其宽度设置为100％表示这是跨浏览器工作的.图的宽度将是图像的本机宽度,除非该宽度以其他方式受到限制.
