Responsive Images Done Right
Responsive Images Done Right: The Right Way To Do Responsive Images.
In this tutorial we will:
1. Use picturefill.js, the picture & source elements & srcset for truly responsive images (All Browsers Supported).
2. Create a full size width and height banner image.
3. Use CSS The Sassy Way (SCSS) and with plain ol’ CSS.
4. Animate a html character in a span with css3 tranforms.
5. Vertically and horizontally align divs and content using Flexbox.
6. Use vh and vw (viewport sizes).
1. I Love The Beach
Responsive images using Picturefill.js, the picture, source elements & source set attribute.
The images will change based on the media query in the source attribute (HTML) targeting the pixel width of the broswer size.
Make sure the image is large enough for desktop screens and then use smaller images for mobile devices.
Notice the image change when the browser size changes.
Viewport sizes are used: vh (viewport height) and vw (viewport width).
The content h1 or text with heart & divs are centred using flexbox CSS.
The animation of the love heart uses a 2D CSS3 transform animation.
You can simply resize the images to different sizes for different device widths and resolutions.
You can use w (width) and h (height) in the source attribute as well as 1x and 2x for different screen resolutions. (See Further Info links below).
Set the container overflow to hidden.
It’s plain ol’ CSS not SASS :).
Don’t forget to link to a picturefill.js resource or CDN like so:
https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js
The images scales and does not skew. The aspect ratio is kept intact. The appropriately sized image is loaded at each breakpoint for the browser width or device. Move the desktop browser from right to left with your mouse to reduce the size of the bowser to mimic the devices browser size (Mobile Phone, Tablet, Desktop). A browser refresh may be required as it’s an iframe.
Further Information:
Responsive images with Picturefill.js & srcset video
Note for background images in css use: background-image:url(‘link-to-the-image.png’); & use {background-size:cover;}.
Apply different sized images at different break points using media queries for responsive background images purely in css. But this technique is hard coding the image in css at different breakpoints and not an ideal solution when building with a CMS (which will be dynamic).
2. I Love Code – Using Percentages example %
This technique uses one image across all devices and will take a longer amount of time to download on devices with weaker internet connections (like a mobile phone). The image will scale. The aspect ratio will not change.
I’ve created a JS fiddle to show a full size banner image using percentages.
The parent container uses percentage.
The child div “two” uses percentages and is centred using percentage.
The content h1 or text with heart is centred using flexbox CSS.
The animation of the love heart uses a 2D CSS3 transform animation.
The SASS is nested but no mixins or variables are used.
Keyframes from 0%, 50% to 100% are used with a scale of 1 to 1.3.
Notice the image only takes up part (not all) of the screen height on mobile devices (Tablet and Phones). Having an image scale but not take up the full size of it’s container is a bad idea.
3. I Love Coffee – vw & vh & css image hack example.
This technique uses one image across all devices and will take a longer amount of time to download on devices with weaker internet connections (like a mobile phone). The image will not scale and will skew based on the browser width and height. The aspect ratio will change.
I’ve created a JS fiddle to show a full size banner image using percentages within a container.
The container and child div “two” uses viewport sizes.
vw (viewport width) is used as well as vh (viewport height).
The content h1 or text with heart is centred using flexbox CSS.
The animation of the love heart uses a 2D CSS3 transform animation.
The SASS is nested but no mixins or variables are used.
CSS hack on the image.
Keyframes from 0%, 50% to 100% are used with a scale of 1 to 1.3.
Notice the image skews when the browser or screen size changes and looks somewhat distorted. This is due to the aspect ratio of the image changing. Skewing images is a bad idea.