我有带有标题的图像,如下所示:
<figure class="imageBoxShadow">
<img alt="Alt-Text" src="http://lorempixel.com/280/375">
<figcaption>A Caption for this image</figcaption>
</figure>
“imageBoxShadow”类在图像周围放置了一个 boxShadow(谁能猜到?)。我把它放在图上,因为标题应该位于边框内。只要标题比图像宽,就可以正常工作。
但是,如果我有一个小图像和/或一个长标题,标题将尽可能扩展图形元素,这看起来很愚蠢。
当然,我可以通过添加硬编码样式来设置宽度来限制图形元素:
<figure class="imageBoxShadow" style="width: 100px">
<img alt="Alt-Text" src="http://lorempixel.com/100/150">
<figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>
但这感觉很愚蠢,而且在 CMS 环境中不太方便。
有更好的方法吗?
有一个 jsFiddle 链接来查看:http://jsfiddle.net/Sorcy/h5sNB/
最佳答案
关于css - 有没有更好的方法将图形元素限制为所包含图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13342721/