/* <div class="lgui-ratio" data-ratio="3/2">
    <div class="lgui-ratio-item"> 
            <img src="/skins/cn/images/288.png" alt="">
    </div>
</div> */


/* 锁定比例的容器，可根据宽度自适应高度 */
.lgui-ratio {
    position: relative;
}
.lgui-ratio-scroll{
    overflow: auto;
}
.lgui-ratio-hidden{
    overflow: hidden;
}
.lgui-ratio-item {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.lgui-ratio::before {
    position: relative;
    content: "";
    display: block;
    width: 100%;
}

.lgui-ratio[data-ratio="1/1"]::before {
    padding-top: 100%;
}

.lgui-ratio[data-ratio="1/2"]::before {
    padding-top: 200%;
}

.lgui-ratio[data-ratio="2/1"]::before {
    padding-top: 50%;
}

.lgui-ratio[data-ratio="2/3"]::before {
    padding-top: 150%;
}

.lgui-ratio[data-ratio="3/2"]::before {
    padding-top: 66.66%;
}

.lgui-ratio[data-ratio="3/4"]::before {
    padding-top: 133.33%;
}

.lgui-ratio[data-ratio="4/3"]::before {
    padding-top: 75%;
}

.lgui-ratio[data-ratio="9/16"]::before {
    padding-top: 177.77%;
}

.lgui-ratio[data-ratio="16/9"]::before {
    padding-top: 56.25%;
}