Responsive images

Using css content:url

by kmturley

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/320px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg" alt="" />

CSS

/* 48em = 768px */

@media (min-width: 48em) {
    img {
    content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/640px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}


/* 64em = 1024px */

@media (min-width: 64em) {
    img {
    content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/1024px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}

/* 80em = 1280px */

@media (min-width: 80em) {
    img {
    content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/1280px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}