Teutonic CSS

Aspect ratio

←

Here is an addition to the media container. The aspect ratio classes are reserving space in the page layout. This is handy for iframes or any situation you want to have full control about the media size, or have a height for a media container while the media is still loading. It comes with a set of predefined ratios. Put in any kind of content, customize it with the CSS Vars --ar-x and --ar-y.

Resize your browser to see that quote-text get’s cropped. Examine how you can change the default background color and work with unkown or not exactly fitting images, using the extra .cover class. The funny faces are making use of the special radius modifier class .r-circle.

Syntax: ar_{ratio}

SCSS: _aspect-ratio.scss

Different media types

↑ This an embbeded video

Java is, in many ways, C++??.

—Unknown

↑ This is text

↑ This an image

Aspect ratio presets

Covered background image

Cropped image

↑ Larger background-image cut out to fit into content

Covered image

↑ Larger image cut out to fit into content

Custom aspect ratio

↑ Aspect ratio works with any image size, with locally scoped CSS Vars.

<h3 class="ma-b_xs">
  Different media types
</h3>
<div class="grid gap_s ">
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <iframe src="https://www.youtube.com/embed/FZ1KCIZCenw?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This an embbeded video
    </p>
  </div>
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <blockquote class="text-serif text-italic pa_m">
        <p class="text_xl">Java is, in many ways, C++??.</p>
        <p class="text_s ma-t_s">—Unknown</p>
      </blockquote>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This is text
    </p>
  </div>
  <div class="span-4">
    <figure class="ar-16-9 media bo_px">
      <img src="//picsum.photos/800/450/?random" alt="Photo via picsum.photos">
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; This an image
    </p>
  </div>
</div>

<h3 class="ma-t_l ma-b_xs">
  Aspect ratio presets
</h3>
<div class="grid gap_s">
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-1-2 media">
      <img src="//picsum.photos/450/900/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-1-2</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-9-16 media">
      <img src="//picsum.photos/450/800/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-9-16</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-2-3 media">
      <img src="//picsum.photos/450/675/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-2-3</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-3-4 media">
      <img src="//picsum.photos/450/600/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-3-4</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-1-1 media">
      <img src="//picsum.photos/450/450/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-1-1</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-4-3 media">
      <img src="//picsum.photos/600/450/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-4-3</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-3-2 media">
      <img src="//picsum.photos/450/300/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-3-2</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-16-9 media">
      <img src="//picsum.photos/640/360/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-16-9</div>
    </figure>
  </div>
  <div class="span-2 span-4-t span-6-p">
    <figure class="ar-2-1 media">
      <img src="//picsum.photos/800/400/?random&asd=23" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">ar-2-1</div>
    </figure>
  </div>
  <div class="span-1 span-2-t span-3-p">
    <img class="ar-1-1 ra-circle media" src="//api.adorable.io/avatars/300/assffsdf.png" alt="Photo via adorable.io/avatars">
  </div><div class="span-1 span-2-t span-3-p">
    <img class="ar-1-1 ra-circle media" src="//api.adorable.io/avatars/300/21eequwo.png" alt="Photo via adorable.io/avatars">
  </div></div>

<div class="grid gap_s ma-t_l">
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Covered background image
    </h3>
    <figure class="ar-2-1 cover" style="background-image: url('//picsum.photos/400/400/?random')">
      <div class="text-mono mini-info">Cropped image</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Larger background-image cut out to fit into content
    </p>

  </div>
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Covered image
    </h3>
    <figure class="ar-2-1 cover">
      <img class="cover" src="//picsum.photos/450/450/?random" alt="">
      <div class="text-mono mini-info">Cropped image</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Larger image cut out to fit into content
    </p>

  </div>
  <div class="span-4">
    <h3 class="ma-b_xs text-clip">
      Custom aspect ratio
    </h3><figure class="ar-custom">
      <img src="//picsum.photos/1100/300/?random&asd=223" alt="Photo via picsum.photos">
      <div class="text-mono mini-info">1100:300</div>
    </figure>
    <p class="text_s ma-t_xs">
      &uarr; Aspect ratio works with any image size, with locally scoped CSS Vars.
    </p>

  </div>
</div>