div无法适配figure/picture/img高度导致圆角显示异常如何解决？

问题原因 #

容器高度超出图片标注高度4px的核心原因是：<img>属于行内替换元素，默认使用vertical-align: baseline对齐规则，会在元素底部预留出行高相关的空白间隙，最终撑高了外层.picture-container容器。

通用解决方案 #

以下两种方案都无需固定容器高度，可自动适配所有高度不同的图片：

方案1：将img设置为块级元素 #

给内部img新增CSS规则即可：

.picture-container img {
  display: block;
}

img转为块级元素后，不会产生行内元素特有的基线间隙，外层容器会自动贴合图片实际高度，圆角效果可以正常展示。

方案2：修改img的垂直对齐规则 #

也可以通过取消基线对齐实现相同效果：

.picture-container img {
  /* 取值为top、middle也可实现相同效果 */
  vertical-align: bottom;
}

内容的提问来源于stack exchange，提问作者Tibor Nagy