<div class="aspect-ratio-box">
  <div class="aspect-ratio-box-inside">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores harum, cum odio consequuntur ea nam doloremque saepe illum excepturi veniam. Officia fugit ex
  </div>
</div>

<div class="aspect-ratio-box">
  <div class="aspect-ratio-box-inside">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum doloremque similique officia deleniti, ducimus inventore voluptatibus doloribus aut possimus quia error, quidem quibusdam, dolor mollitia atque perspiciatis laudantium fugiat vero nobis! Reprehenderit facere dolore natus mollitia, nobis atque cum alias ut nulla! Blanditiis vitae porro, saepe sed quis natus asperiores sunt perspiciatis. Quod maiores et deserunt dolorum at obcaecati tempore provident iusto vitae reiciendis aperiam illum possimus modi odit ratione doloribus praesentium distinctio, quaerat quis alias. Ratione architecto, rerum deleniti officia consequuntur voluptatem dignissimos! Nisi sed ipsam modi voluptates, sapiente asperiores animi quas illum vitae architecto amet autem, placeat voluptatem culpa distinctio! At, aspernatur a harum hic eum, eveniet aliquid mollitia doloribus. Eaque amet sapiente labore impedit maiores distinctio expedita, aliquam alias dolorum tenetur ipsa unde? Debitis soluta, ad laboriosam eum ut minima hic error voluptates, maxime nisi. Sunt natus quos, earum deserunt sapiente nemo itaque! Incidunt ipsam modi recusandae neque architecto soluta dolorum earum unde, maxime voluptate ad eius dolorem! Nisi quas impedit nesciunt! Numquam, aut et deserunt quisquam voluptatibus vero incidunt. Quod esse fugit, eligendi dolores, ipsum repellat perferendis alias praesentium cupiditate consequatur earum blanditiis id fugiat. Molestias veritatis rerum sint in ut fugiat amet voluptas praesentium commodi?
  </div>
</div>
.aspect-ratio-box {
  background: orange;
  max-width: 50vw;
  margin: 20px auto;
}
.aspect-ratio-box::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: calc(591.44 / 1127.34 * 100%);
}
.aspect-ratio-box::after { /* to clear float */
  content: "";
  display: table;
  clear: both;
}
.aspect-ratio-box-inside {
  font-size: 1.5rem;
  line-height: 1.5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.