img video以短边为准平铺，裁剪

当视频或者img太高或者太宽的时候，不想让全部100%比例显示，但是又想把中间的内容居中显示，裁剪长边，
html

<div class="contain">
        <div class="box">
            <div class="content">
                <img class="img"
                    src="https://mmm-jyj.oss-cn-hangzhou.aliyuncs.com/iDiamond-system/image-test/801f78bc-f438-45d3-8bb2-dc817b959e41.png"
                    alt="">
            </div>
        </div>
    </div>

css样式

.contain {
            position: relative;
            width: 100%;
            background-color: black;
        }

        .box {
            width: 100%;
            padding-bottom: 55.56%;
            background-color: white;
        }

        .content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: hsla(120, 50%, 50%, .5);
        }

        .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }