Elements with Fixed Aspect Ratios

This CSS Reference section displays the code for an example that illustrates how to create elements with fixed aspect ratios.

FixedAspectRatio.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net</title>
    <style type="text/css">
      #idMainContainer {
        width:500px;
        background-color: transparent;
      }
      .idAspect16x9 {
        position: relative;
        width:100%;
        padding-top: 56.25%;
        background-color: rgba(0, 0, 0, .25);
        margin-bottom: 10px;
      }
      .idAspect4x3 {
        position: relative;
        width:100%;
        padding-top: 75%;
        background-color: rgba(0, 0, 0, .5);
      }
      .cText {
        position: absolute;
        text-align: center;
        font-size: 20px;
        color: white;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        padding: 5px;
      }
      .cHeading {
        background-color: rgba(255, 255, 255, .5);
        color: black;
        font-weight:bold;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div id="idMainContainer">
      <div class="idAspect16x9">
        <div class="cText">
          <div class="cHeading">Isaiah 53:1-3</div>
<p>Who has believed what we have heard?
  And to whom has the arm of the Lord been revealed?
For he grew up before him like a young plant,
  and like a root out of dry ground;
he had no form or comeliness that we should look at him,
  and no beauty that we should desire him.
He was despised and rejected by men;
  a man of sorrows, and acquainted with grief;
and as one from whom men hide their faces
  he was despised, and we esteemed him not.</p>
        </div>
      </div>
      <div class="idAspect4x3">
        <div class="cText">
          <div class="cHeading">Isaiah 56:3-5</div>
<p>Let not the foreigner who has joined himself to the Lord say,
  "The Lord will surely separate me from his people";
and let not the eunuch say,
  "Behold, I am a dry tree."
For thus says the Lord:
"To the eunuchs who keep my sabbaths,
  who choose the things that please me
  and hold fast my covenant,
I will give in my house and within my walls
  a monument and a name
  better than sons and daughters;
I will give them an everlasting name
  which shall not be cut off."</p>
        </div>
      </div>
    </div>
  </body>
</html>

Core CSS

Elements with Fixed Aspect Ratios

FixedAspectRatio.html

Output