如何实现仅覆盖底部下半段、右侧半段的响应式图片边框

我想要在网页上实现如下所示的图片展示效果：

如果有更简便的实现方法，欢迎大家分享。目前我已编写的代码如下：

CSS代码：

.border-box{
    height: 300px;
    margin-top: -65%;
    width: 75%;
    float: right;
    margin-right: -8%;
    border-bottom: 2px solid #004689;
    border-right: 2px solid #004689;
    background: #004689 0% 0% no-repeat padding-box;
    opacity: 1;
}

HTML代码：

<div class="about-us-body-img">
    <div class="about-img"><img src="https://picsum.photos/200"></div>
    <div class="border-box"></div>
</div>

当前代码功能可以正常运行，但存在的问题是：我无法像设置width属性那样为.border-box的height属性使用百分比值。使用300px固定值时不具备响应能力，在小屏幕设备上边框的尺寸会比图片大3倍左右。
请问我要如何为height属性使用百分比值，或是让高度可以适配不同屏幕尺寸？另外有没有更简便的方式可以实现整个效果？

解答 #

问题根源 #

百分比高度生效的前提是父元素有明确的可计算高度值，你当前的父容器.about-us-body-img没有设置固定高度，子元素的百分比高度无法被浏览器解析，只能用固定px值，自然不具备响应性。

更简便的实现方案（无需额外空DOM节点） #

直接用CSS伪元素实现偏移背景效果，代码更简洁，天然支持响应式：

简化后HTML

<div class="about-us-body-img">
    <img src="https://picsum.photos/800/600" alt="展示图片">
</div>

对应CSS代码

.about-us-body-img {
    position: relative;
    width: 80%; /* 可按需调整容器宽度，支持百分比 */
    max-width: 600px; /* 可选，限制大屏下的最大宽度 */
    margin: 20px auto; /* 可选，实现容器居中 */
}
.about-us-body-img img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2; /* 图片置于上层 */
}
/* 伪元素实现蓝色偏移边框效果 */
.about-us-body-img::after {
    content: '';
    position: absolute;
    /* 偏移量和原有效果对齐 */
    right: -8%;
    bottom: -8%;
    width: 75%;
    /* 按图片比例自动计算高度，完全响应，图片比例变更时修改这个值即可 */
    aspect-ratio: 4/3; 
    background: #004689;
    border-bottom: 2px solid #004689;
    border-right: 2px solid #004689;
    z-index: 1; /* 置于图片下层 */
}

老浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的旧版本浏览器，把伪元素的aspect-ratio替换为padding-top即可：

.about-us-body-img::after {
    content: '';
    position: absolute;
    right: -8%;
    bottom: -8%;
    width: 75%;
    height: 0;
    /* 75%对应4:3比例，计算公式为 高度/宽度*100%，比如16:9比例就填56.25% */
    padding-top: 75%; 
    background: #004689;
    border-bottom: 2px solid #004689;
    border-right: 2px solid #004689;
    z-index: 1;
}

该方案在所有屏幕尺寸下都会和图片保持等比例适配，不会出现小屏边框过大的问题，也避免了float布局带来的高度塌陷风险。

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