Skip to content

Instantly share code, notes, and snippets.

@restlessmedia

restlessmedia/gist:ff09ab58fc53d3cdf495

Created May 8, 2014 09:12
Show Gist options
  • Save restlessmedia/ff09ab58fc53d3cdf495 to your computer and use it in GitHub Desktop.
Save restlessmedia/ff09ab58fc53d3cdf495 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive images using inline styles
Raw
gistfile1.html
<html>
<head></head>
<body>
<img class="image"/>
<style type="text/css">
.image {
background-color: grey;
background-image: url(100x100.jpg);
width: 100px;
height: 75px;
display: block;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px ) {
.image {
background-image: url(100x100.jpg);
width: 100px;
height: 75px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px ) {
.image {
background-image: url(200x200.jpg);
width: 200px;
height: 150px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px ) {
.image {
background-image: url(300x300.jpg);
width: 300px;
height: 225px;
}
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment