html - 角落有边框的图像 - img 下方的空间

Question

我想用对角的边框创建图像（使用:: afterand :: before）。我几乎明白了，但图像并没有覆盖 div 中的整个空间。图片下方有一些空白区域（在jsfiddle中标记为红色），我不明白是什么原因。最重要的是图像的高度会改变宽度。你能解释一下我做错了什么吗？:)

这是我的代码： https ://jsfiddle.net/ndy79hvo/1/

标签： htmlcssimage

Answer 1

这是由于baseline图像的默认垂直对齐方式，这会在基线下方留下一些空白空间（如 j、p、y 等字母的下降部分会去的地方）。添加display: block;到图像的 CSS 规则以更改此设置。

https://jsfiddle.net/tpqzr3w2/