Core CSS

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.


<!DOCTYPE html>
    <style type="text/css">
      #idMainContainer {
        background-color: transparent;
      .idAspect16x9 {
        position: relative;
        padding-top: 56.25%;
        background-color: rgba(0, 0, 0, .25);
        margin-bottom: 10px;
      .idAspect4x3 {
        position: relative;
        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-size: 40px;
    <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 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>



© 2007–2022 LLC. All rights reserved.