Skip to content

Instantly share code, notes, and snippets.

@dongyuwei

dongyuwei/css-responsive-images.html

Forked from necolas/css-responsive-images.html
Last active August 29, 2015 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dongyuwei/90dbc36cc946cd1b5632 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dongyuwei/90dbc36cc946cd1b5632 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @necolas necolas revised this gist May 19, 2011. 1 changed file with 0 additions and 32 deletions.
    32 changes: 0 additions & 32 deletions css-responsive-images-alt.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +0,0 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    /* Play nice with existing requirements for
    Responsive Images polyfill */

    /* Doesn't stop original source image being
    downloaded too */

    @media (min-device-width:600px) {
    img[src*=".r."] {
    content: attr(data-src-600px, url);
    }
    }

    @media (min-device-width:800px) {
    img[src*=".r."] {
    content: attr(data-src-800px, url);
    }
    }
    </style>
    </head>
    <body>
    <img src="image.r.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">
    </body>
    </html>
  2. @necolas necolas revised this gist May 18, 2011. 2 changed files with 6 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions css-responsive-images-alt.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,9 @@
    <style>
    /* Play nice with existing requirements for
    Responsive Images polyfill */

    /* Doesn't stop original source image being
    downloaded too */

    @media (min-device-width:600px) {
    img[src*=".r."] {
    3 changes: 3 additions & 0 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,9 @@
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    /* Doesn't stop original source image being
    downloaded too */

    @media (min-device-width:600px) {
    img[data-src-600px] {
    content: attr(data-src-600px, url);
  3. @necolas necolas revised this gist May 18, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,13 @@
    <title>CSS responsive images</title>
    <style>
    @media (min-device-width:600px) {
    img {
    img[data-src-600px] {
    content: attr(data-src-600px, url);
    }
    }

    @media (min-device-width:800px) {
    img {
    img[data-src-800px] {
    content: attr(data-src-800px, url);
    }
    }
  4. @necolas necolas revised this gist May 18, 2011. 2 changed files with 4 additions and 4 deletions.
    4 changes: 2 additions & 2 deletions css-responsive-images-alt.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,13 @@
    /* Play nice with existing requirements for
    Responsive Images polyfill */

    @media all and (min-device-width:600px) {
    @media (min-device-width:600px) {
    img[src*=".r."] {
    content: attr(data-src-600px, url);
    }
    }

    @media all and (min-device-width:800px) {
    @media (min-device-width:800px) {
    img[src*=".r."] {
    content: attr(data-src-800px, url);
    }
    4 changes: 2 additions & 2 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,13 @@
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    @media all and (min-device-width:600px) {
    @media (min-device-width:600px) {
    img {
    content: attr(data-src-600px, url);
    }
    }

    @media all and (min-device-width:800px) {
    @media (min-device-width:800px) {
    img {
    content: attr(data-src-800px, url);
    }
  5. @necolas necolas revised this gist May 18, 2011. 2 changed files with 4 additions and 4 deletions.
    4 changes: 2 additions & 2 deletions css-responsive-images-alt.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,13 +7,13 @@
    /* Play nice with existing requirements for
    Responsive Images polyfill */

    @media screen and (min-device-width:600px) {
    @media all and (min-device-width:600px) {
    img[src*=".r."] {
    content: attr(data-src-600px, url);
    }
    }

    @media screen and (min-device-width:800px) {
    @media all and (min-device-width:800px) {
    img[src*=".r."] {
    content: attr(data-src-800px, url);
    }
    4 changes: 2 additions & 2 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,13 @@
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    @media screen and (min-device-width:600px) {
    @media all and (min-device-width:600px) {
    img {
    content: attr(data-src-600px, url);
    }
    }

    @media screen and (min-device-width:800px) {
    @media all and (min-device-width:800px) {
    img {
    content: attr(data-src-800px, url);
    }
  6. @necolas necolas revised this gist May 18, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,8 @@
    </head>
    <body>
    <img src="image.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">
    </body>
    </html>
  7. @necolas necolas revised this gist May 18, 2011. 1 changed file with 29 additions and 0 deletions.
    29 changes: 29 additions & 0 deletions css-responsive-images-alt.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    /* Play nice with existing requirements for
    Responsive Images polyfill */

    @media screen and (min-device-width:600px) {
    img[src*=".r."] {
    content: attr(data-src-600px, url);
    }
    }

    @media screen and (min-device-width:800px) {
    img[src*=".r."] {
    content: attr(data-src-800px, url);
    }
    }
    </style>
    </head>
    <body>
    <img src="image.r.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">
    </body>
    </html>
  8. @necolas necolas created this gist May 18, 2011.
    26 changes: 26 additions & 0 deletions css-responsive-images.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS responsive images</title>
    <style>
    @media screen and (min-device-width:600px) {
    img {
    content: attr(data-src-600px, url);
    }
    }

    @media screen and (min-device-width:800px) {
    img {
    content: attr(data-src-800px, url);
    }
    }
    </style>
    </head>
    <body>
    <img src="image.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">
    </body>
    </html>