JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<div></div>

<!-- 

A quick method of making a non-square image into a thumbnail using the background-size property. I doubt this is super accessible, disable CSS and you've lost the images, however could probably put an <img /> in there too and hide it away.

You could use background-size: 200px; before cover... that should be used when cover fails on non-supporting browsers.

-->

CSS

body {
    background-color: black;   
}

div {
    width: 200px;
    height: 200px;
    border: 4px solid white;
    margin: 10px;
    background: url(http://dl.dropbox.com/u/813705/BEMotorsport/images/lambo.jpg) 50% 50%;
    background-size: 200px;
    background-size: cover;
}