figcaption可以限制在响应大小的图像的宽度？

Question

说我有以下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父母的宽度设置明确,max-width导致整个数字真的很小(虽然并不完全1px).

因此,它是能够使用CSS(2或3),以实现二者的图像标题缠绕以不宽于该图像和图像不大于视口宽？

Answer 1

老问题,但我遇到了同样的问题,并能拿出一个相当巧妙的解决办法,灵感来自此.

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

这可以确保figcaption不超过宽度figure,同时允许您保持max-width图像.适用于所有优秀的浏览器和IE8 +.

有一个Firefox错误阻止max-width在设置的元素内工作display: table.因此,不是在图像上使用max-width,而是将其宽度设置为100%意味着它可以跨浏览器工作.图形的宽度将是图像的原始宽度,除非该宽度以某种其他方式受到限制.