求助：新闻板块非标准响应式图片边框实现问题

我正尝试为新闻板块的图片实现一款非标准边框，计划将图片设置为较低的z-index值，让边框置于图片上方，同时确保两者具备响应式特性，但目前未能成功实现。

现有代码 #

CSS代码 #

.news-gallery-image {
    position: relative;
    height: 100%;
}

.news-gallery-image img {
    width: 100%;
    height: 100%;
}

.news-gallery-image .news-border {
    content: url("/resources/images/gallery-image-background-holder.png");
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

HTML代码 #

<div class="mt-5 m-auto w-full">
    <!-- Swiper -->
    <div class="swiper news-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>

                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
            <div class="swiper-slide flex flex-col">
                <div class="news-gallery-image">
                    <img src="https://i.imgur.com/bRqr97Q.png" class="image" alt="forge your deck">
                    <img class="news-border" alt="borders"/>
                </div>
                <div class="w-auto mt-2">
                    <h1 class="text-1xl text-center">
                        HOTFIX #1.23 NOW LIVE!
                    </h1>
                </div>
            </div>
        </div>
    </div>
</div>

参考资源 #

边框样式图 #

效果示例图 #

解决方案 #

问题拆解 #

1. content 属性仅支持伪元素（:before/:after），直接给img标签设置不会生效，导致边框图片无法加载。
2. 边框图片未设置尺寸，无法和底层图片匹配，响应式失效。
3. 底层图片未显式设置position，z-index无法生效。

修改后的代码 #

CSS代码

.news-gallery-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9; /* 匹配你的图片比例，可根据实际调整 */
}

.news-gallery-image .image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
    position: relative; /* 必须设置position才能激活z-index */
    z-index: 1;
}

.news-gallery-image .news-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: contain; /* 确保边框完整显示，适配容器尺寸 */
}

HTML调整

直接在边框图片标签中写入src路径，删除无效的content设置：

<img class="news-border" src="/resources/images/gallery-image-background-holder.png" alt="borders"/>

进阶优化 #

如果边框需要和图片保持固定间距，可为容器添加内边距并设置盒模型：

.news-gallery-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    padding: 1rem; /* 根据边框厚度调整间距 */
    box-sizing: border-box; /* 让内边距包含在容器尺寸内 */
}

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