@import '../../style/common_mixin.css'; .cmp-player-content-wrapper{ max-height: 100%; display: block; position: relative; height: 100%; .cmp-cnt-box{ display: inline-block; max-width: 100%; max-height: 100%; width: auto; height: 100%; position: relative; img{ height: 100%; width: auto; } } .cmp-cnt-main{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; } } [style*="--aspect-ratio"] > :first-child { width: 100%; } [style*="--aspect-ratio"] > img { height: auto; } @supports (--custom:property) { [style*="--aspect-ratio"] { position: relative; } [style*="--aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); } [style*="--aspect-ratio"] > :first-child { position: absolute; top: 0; left: 0; height: 100%; } }