JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div><h3>4:3</h3></div>

CSS

div{
  background: #ccc url('http://science-all.com/images/wallpapers/nature-background-images/nature-background-images-7.jpg') no-repeat center top;
  padding-bottom: 75%; /* 3/4*100=75% */
  position: relative;
  -webkit-background-size: cover;
  background-size: cover;
}
div > h3{
  font-size: 50px;
  font-weight: 700;
  position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}