cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <p>Responsive Imges are great. Having your page reflow because it takes a moment for your images to load and work out their intrinsic ratios: not so great.</p>
<p>Enter the ratiobox. A little wraper that lets you hint at what size your images shall be without having to wait for them to begin downloading. It even comes with a pretty placeholder background in case the image fails to load entirely.</p>
<p>Taken from <a href="https://amen.tools.bbc.co.uk/">Amen</a>, BBC iPlayer Radio's Styleguide.</p>

<div class="container">
  <div class="container__item container__item--double">
    <div class="ratiobox ratiobox--32x9"><img src="http://www.fillmurray.com/1280/360" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--16x9"><img src="http://www.fillmurray.com/640/360" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--4x3"><img src="http://www.fillmurray.com/640/480" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--16x9"><!-- I'm Empty so you can see the default background --></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--3x2"><!-- I'm Empty so you can see the default background --></div>
  </div>
  <div class="container__item container__item--double">
    <div class="ratiobox ratiobox--32x9"><img src="http://www.fillmurray.com/1280/360" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--3x2"><img src="http://www.fillmurray.com/640/360?b" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--1x1"><img src="http://www.fillmurray.com/360/360" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--1x1"><img src="http://www.fillmurray.com/640/640?" alt="" class="rsp-img" /></div>
  </div>
  <div class="container__item">
    <div class="ratiobox ratiobox--1x1"><img src="http://www.fillmurray.com/480/480" alt="" class="rsp-img" /></div>
  </div>
</div>

<p>I'm some content at the bottom of the page so you can see I don't get pushed all over the shop while the images load.</p>
            
          
!
            
              // Responsive image
// Make the <img> fill the container
.img-rsp {
    width: 100%;
    display: block;
}

// An empty box that maintains ratio when resizing (16:9 by default).
// Any <img> inside will fill the ratio
// Can also be used for background images
/*
<div class="ratiobox ratiobox--4x3">
  <img class="img-rsp" src="..." />
</div>
*/
.ratiobox {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 100% / (16/9); // 16x9 by default

    > img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
}

// set the placeholder background
// this is totally optional but gives people something to
// look at while your image loads
// fade from off-black to off-white (full black/white is too 'bright')
.ratiobox {
    background: #111;
    background:
    linear-gradient(
        to right,
        #111111 0%,
        #111111 20%,
        #404040 20%,
        #404040 40%,
        #808080 40%,
        #808080 60%,
        #BFBFBF 60%,
        #BFBFBF 80%,
        #eeeeee 80%,
        #eeeeee 100%
    ),
    linear-gradient(
        90deg,
        #eeeeee,
        #111111
    );
    background-repeat: no-repeat;
    background-size: 100% 10%, 100% 100%;
}

@mixin ratiobox($width, $height) {
    .ratiobox--#{$width}x#{$height} {
        padding-bottom: 100% / ($width / $height);
    }
}
// Create variants with types of ratio
@include ratiobox(32,9);
@include ratiobox(16,9);
@include ratiobox(4,3);
@include ratiobox(3,2);
@include ratiobox(1,1);


// Fluff to give us some basic grid styling for this demo
.container {
    margin-left: -16px;
    letter-spacing: -0.31em;
}
.container__item {
    box-sizing: border-box;
    display: inline-block;
    width: 25%;
    vertical-align: top;
    padding-left: 16px;
    margin-bottom: 16px;
    letter-spacing: normal;
}
.container__item--double {
    width: 50%;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console