我经常发现自己使用代码块来生成内联文章图像,如下所示:
...article text.
<div class="article-image right" style="width: 250px;">
<img src="..." width="250" alt="" />
<p class="caption">Potentially long image caption</p>
</div>
More article text...
或者,更简洁的HTML5版本:
...article text.
<figure class="right" style="width: 250px;">
<img src="..." width="250" alt="" />
<figcaption>Potentially long image caption</figcaption>
</figure>
More article text...
由于我使用的是动态处理图像的CMS,我一直在动态地定义图像的大小(在这种情况下为250px),并且我也一直将该大小限制应用于包含其img和字幕.这样,标题永远不会增加父元素的大小超出img标记的定义宽度.
我的问题是,如果有一些CSS技巧我可以应用于其中一个元素,它将完成同样的事情,而无需手动定义宽度？一些方法可以防止字幕在宽度上扩展其父元素,但允许它们影响高度？当然,父元素的宽度仍然需要适应img宽度......