Uncle Dave’s Ol’ Padded Box

Aus dem Artikel: http://daverupert.com/2012/04/uncle-daves-ol-padded-box/

HTML

<!-- http://yaccessibilityblog.com/library/aria-fix-non-standard-images.html -->
<div id="meowmeow" role="img" aria-label="Kitty Cats">liaj d;ioaj sd;lkja d;lja d;lja sd;lajs dklajsd l;akjd ;alkjd alk;j dal;kjd qklsjd aklsjd </div>

CSS

#meowmeow {
        background: url(http://placekitten.com/720/405/) no-repeat center center;
        background-size: cover;
        height: 0;
        padding-bottom: 50%; /* 16:9 */
}

/* basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

   /* What if someone visits using an iPad? */
    @media screen and (min-width: 768px) {
        #meowmeow {
            background-image: url(http://lorempixel.com/400/200/);
        }
    }

    @media screen and (min-width: 1200px) {
        #meowmeow {
            background-image: url(http://flickholdr.com/1000/600);
        }
    }

/* ZOMG! WUT ABOUT RETINAZ D00D!?? */
/*
    @media screen and (min-width: 768px) and (min-device-pixel-ratio: 1.5) {
        #meowmeow {
            background-image: url([email protected]);
        }
    }
*/