.aspect {
    width: 100%;
    position: relative; /* If you want text inside of it */
}

.aspect .content, .aspect .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.aspect .content {
    z-index: 2;
    padding: 2% 5%;
}

.aspect .bg {
    z-index: 1;
}

.aspect.poster {
    padding-top: 143%; /* 70x100 */
}

.poster-landscape {
    padding-top: 71%; /* 140x100 */
}

.square {
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.highend {
    padding-top: 80%; /* 5:4 */
}

.widescreen {
    padding-top: 75.18%; /* 1,33:1 */
}

.ntsc, .tv {
    padding-top: 75%; /* 4:3 */
}

.academy {
    padding-top: 60.60%; /* 1,65:1 */
}

.widescreen-television, .hdtv {
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.flat, .widescreen-american {
    padding-top: 54.05%; /* 1,85:1 */
}

.aspect .full {
    padding-top: 52.63%; /* 1,9:1 */
}

.frame-70 {
    padding-top: 45.45%; /* 2,2:1 */
}

.anamprphic, .scope {
    padding-top: 41.84%; /* 2,39:1 */
}

.cinerama {
    padding-top: 36.10%; /* 2,77:1 */
}