HTML5 Responsive Images and CSS3 Image Flipping
It’s hard to have a responsive website without responsive images; I usually use the HTML5 figure “figure” or the aside “aside” tag for responsive images. In your CSS, just assign your width, max-width, and/or min-width to the tag.
In the code below, the image below will not exceed 800 pixels wide or get smaller than 300 pixels wide.
figure{min-width:300px;max-width:800px}
figure img{width:100%;}
Using CSS3, we can also flip images horizontally without the use of an image editor or JavaScript.
aside img{
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
}