基于Bootstrap框架的三图并排样式

基于Bootstrap框架的三图并排样式，三张图片以背景的方式并排。

HTML代码

<div class="row my-2">
    <div class="col-md-4">
        <div class="media media-3x2">
            <a class="media-content" style="background-image: url('https://www.wanghao.me/wp-content/uploads/2022/09/1663478057-ncxx.jpg');">
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media media-3x2">
            <a class="media-content" style="background-image: url('https://www.wanghao.me/wp-content/uploads/2022/09/1663477744-csp-j.jpeg');">
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="media media-3x2">
            <a class="media-content" style="background-image: url('https://www.wanghao.me/wp-content/uploads/2022/09/1663478059-zkz.jpg');">
            </a>
        </div>
    </div>
</div>

CSS代码

.shuo-content .media, 
.shuo-list .media {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-radius: inherit;
}
.shuo-content .media-content, 
.shuo-list .media-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    border-radius: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: var(--bg-light);
}
.shuo-content .media-content:after, 
.shuo-list .media-content:after {
    background-image: -webkit-gradient(linear,left top,right top,from(transparent),to(rgba(255,255,255,.2)));
    background-image: linear-gradient(to right,transparent,rgba(255,255,255,.2));
    content: "";
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    top: 0;
    left: -75%;
    z-index: 2;
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    pointer-events: none;
}

.shuo-content .media:after, 
.shuo-list .media:after {
    content: '';
    display: block;
    padding-top: 100%;
}
.shuo-content .media-3x2:after, 
.shuo-list .media-3x2:after{
    padding-top:66.66666%
}