[笔记]相对大小不确定的图片绝对定位的图标

效果图

注意下图右下角的放大镜图标,无论图片被裁剪还是放大,该图标始终会在图片的右下角(DEMO)。 image

实现方法

图片外套一个层,大小始终和图片一样,让放大镜图标相对这个始终和图片同样大小的层绝对定位。因此设置其 CSS 属性 display:inline-block;position:relative; 。放大镜图标作为一个 span 紧跟在图片后面,设置 CSS position:absolute; bottom:0; right:0; 。

display:inline-block; 和 display:table;

display:table; 也可以实现 div 始终和内包的图片大小相同,但是在 Firefox 8(可能也包含之前的版本) 不支持在其上设置 positiion:relative; ),故而不适用本文说的情况。 display:table-cell; 等类似的 display 属性也能同样控制 div 的大小,但是它们的浏览器兼容性更差,故而不讨论。

参考文献

《CSS 宽度自适应》- 源代码爱好者 - http://www.codefans.net/jscss/code/865.shtml