图片卡片hover效果宽度异常：黑色蒙层无法铺满父元素.page-card求解

• 问题本质是两个CSS定位规则缺失导致的：
  1. 父容器.page-card没有设置position: relative，导致内部绝对定位的figcaption的定位基准不是当前卡片，你之前尝试设置width: 100%不生效就是这个原因，宽度参照错乱
  2. figcaption作为绝对定位元素，仅设置了top和height属性，没有指定左右对齐规则，宽度默认由内容撑开，所以只有内容换行时才能撑满宽度

只需要修改两处CSS即可，完全保留你要求的background-size: cover属性，不需要其他hack：

1. 给.page-card添加相对定位，作为内部绝对定位元素的参照
2. 给.page-card figcaption添加left: 0和right: 0规则，强制宽度和父容器保持一致，可移除多余的margin-right: 15px避免宽度溢出

修改后的核心代码如下：

/* 新增position: relative */
.page-card {
    overflow: hidden;
    text-align: left;
    margin-top: 30px;
    position: relative;
}

/* 新增left: 0; right: 0; 移除margin-right:15px */
.page-card figcaption {
    position: absolute;
    top: calc(77%);
    height: 100%;
    left: 0;
    right: 0;
    background-color: black;
    /* 背景图的background-size: cover属性完全保留 */
    background-size: cover;
    border-top: 1px solid #333;
    padding: 35px 25px 65px;
    color: white;
}

修改后无论figcaption内部是否有内容、内容长度多少，hover时蒙层都会完整覆盖整个卡片区域，背景图的cover展示效果不受任何影响，也不会和Bootstrap的栅格规则冲突。

内容的提问来源于stack exchange，提问作者James Lines