| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <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); | |
| } | |
| } | |
| @media (min-device-width:800px) { | |
| img[data-src-800px] { | |
| 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> |
You could use whatever data-* attribute you find best.
I'm not sure if this is the right place to ask, but coulnd't find a better place :)
Anyway i wanted to know whats the solution to responsive images?
I've tried several methods (including yours and the tag wich i read its still a proposal ) but none seemed to work.
I prefer not to have Javascript doing these kind of tasks, has anyone come up with a smart solution?
Help really appreciated
<!DOCTYPE html>
CSS responsive images
<br>
downloaded too */<br>
img {<br>
content: url(../images/retinaimg.jpg); <br>
}<br>
@media (min-device-width:600px) {<br>
img{ <br>
content: url(../images/retinaimg600px.jpg); <br>
}<br>
}</p>
<pre><code> @media (min-device-width:800px) {
img{
content: url(../images/retinaimg800px.jpg);
}
}
</style>
</head>
<body>
<img alt="">
</body>
</code></pre>
<p></html></p>
<p>This is the right way</p>
Clever. I wonder if a better attribute could be used instead of "data-src-600px", or maybe an alternative markup that makes clear what is delivered to what media size.