...
Often these techniques are used in unison because the first ensures image are visually the correct size whereas the second ensures that we are not wasting bandwidth by serving really large images to really small devices.
Here is a really good overview/primer explaining some of the high level concepts: https://www.lullabot.com/articles/fundamentals-of-responsive-images
CSS
The first technique is fairly straight forward and can be achieved with the following css:
| Code Block | ||
|---|---|---|
| ||
img {
display: block; //* Make sure img tag acts like a block level element. */
max-width: 100%; //* Part 1: Set a maximum relative to the parent. */
height: auto; //* Part 2: Scale the height according to the width, otherwise you get stretching. */
}
|
When using bootstrap this can be made even simpler by simply extending the 'img-responsive' class:
| Code Block | ||
|---|---|---|
| ||
img {
@extend .img-responsive;
}
|
...
The picture element works similarly to the video element; a wrapping element contains multiple source elements. This allows the browser to decide which source to use under a certain set of criteria. In the case of the picture element the criteria is set by the 'media' attribute which contains a CSS media query that informs the browser under which circumstances the given source should be used.
Bootstrap
If you are using the Bootstrap grid framework then the following tool could be helpful: https://kalamuna.github.io/bootstrap-picture-srcset-generator/
Given an aspect ratio, this tool generates picture/source markup based on how many grid units wide you want your image to be at any given breakpoint. This markup can be copied directly into html templates or alternatively you can use the image widths and heights generated at each breakpoint to inform the creation of Drupal image styles and responsive images.