Create a gist now

Instantly share code, notes, and snippets.

Adaptive Images with CSS
/* place these styles in your global stylesheet */
.image {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.image {
*display: inline;
}
.image .inner {
display: block;
height: 0;
}
<!-- adaptive image -->
<span class="image-scope">
<style scoped>
/* apply background image and dimensions to the span below */
</style>
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>
</span>
.image {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.image {
*display: inline;
}
@import "compass/css3/inline-block";
@import "compass/typography/text/replacement";
@import "compass/css3/background-size";
.image {
@include inline-block;
@include squish-text;
@include background-size(100%);
background-position: 50% 50%;
background-repeat: no-repeat;
}
<!-- This image will scale proportionally to be the full width of the column -->
<img src="road.jpg" alt="A road in Sweden during winter." width="100%">
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>
<span class="image-scope">
<style scoped>
/* fall-back styles for browsers without media query support (IE6-8) */
#road {
background-image: url('road.jpg');
width: 100%;
/* don't define a height on the .image */
}
#road .inner {
padding-top: 66.5039%; /* 681px / 1024px * 100% = 66.5039% */
}
/* small image for mobile */
@media (min-width: 0px) {
#road {
background-image: url('road-small.jpg');
/* width of 100% is inherited from the fall-back styles */
/* don't define a height on the .image */
}
#road .inner {
padding-top: 66.5625%; /* 213px / 320px * 100% = 66.5625% */
}
}
/* medium image for tablets */
@media (min-width: 640px) {
#road {
background-image: url('road-medium.jpg');
/* width of 100% is inherited from the fall-back styles */
/* don't define a height on the .image */
}
#road .inner {
padding-top: 66.5625%; /* 426px / 640px * 100% = 66.5625% */
}
}
/* large image for desktop */
@media (min-width: 1024px) {
#road {
background-image: url('road.jpg');
/* width of 100% is inherited from the fall-back styles */
/* don't define a height on the .image */
}
#road .inner {
padding-top: 66.5039%; /* 681px / 1024px * 100% = 66.5039% */
}
}
</style>
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>
</span>
/* additional generic styles to be added to the styles from step 3 above */
.image .inner {
display: block;
height: 0;
}
<img src="road.jpg" alt="A road in Sweden during winter.">
<span class="image">A road in Sweden during winter.</span>
<span class="image" role="img" aria-label="A road in Sweden during winter."></span>
<style>
/* fall-back styles for browsers without media query support (IE6-8) */
#road {
background-image: url('road.jpg');
height: 681px;
width: 1024px;
}
/* small image for mobile */
@media (min-width: 0px) {
#road {
background-image: url('road-small.jpg');
height: 213px;
width: 320px;
}
}
/* medium image for tablets */
@media (min-width: 640px) {
#road {
background-image: url('road-medium.jpg');
height: 426px;
width: 640px;
}
}
/* large image for desktop */
@media (min-width: 1024px) {
#road {
background-image: url('road.jpg');
height: 681px;
width: 1024px;
}
}
</style>
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."></span>
<span class="image-scope">
<style scoped>
/* fall-back styles for browsers without media query support (IE6-8) */
#road {
background-image: url('road.jpg');
height: 681px;
width: 1024px;
}
/* small image for mobile */
@media (min-width: 0px) {
#road {
background-image: url('road-small.jpg');
height: 213px;
width: 320px;
}
}
/* medium image for tablets */
@media (min-width: 640px) {
#road {
background-image: url('road-medium.jpg');
height: 426px;
width: 640px;
}
}
/* large image for desktop */
@media (min-width: 1024px) {
#road {
background-image: url('road.jpg');
height: 681px;
width: 1024px;
}
}
</style>
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."></span>
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment