Padding Bottom Trick

Responsive images and videos

To get the correct padding-bottom percentage to use, divide (height/width)*1000

HTML

<div class="wrapper-with-intrinsic-ratio">
    <div class="element-to-stretch"></div>
</div>

CSS

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 78%;
    height: 0;
}
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("Dad1.JPG");
    background-size: cover;
    background-repeat: no-repeat;
}

Responsive Image with "Vertical-Align: Middle" Text

HTML

<div class="banner-padding-bottom2">
    <div class="banner-image2">
        <div class="inner-table2">
            <div class="inner-tablecell2">
                <div class="text-line">Hoodie man bun craft beer succulents</div>
            </div>
        </div>
    </div>
</div>

CSS

.banner-padding-bottom2 {
    padding-bottom: 44%;
    position:  relative;
    height:0;
}
.banner-image2 {
    position: absolute;
    background-image: url('EG3C9957.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    top:0;
    left:0;    
}
.inner-table2 {
    display: table;
    height: 100%;
    width: 100%;
}
.inner-tablecell2 {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}