
Drupal 8 Development Cookbook
By :

The Responsive Image module provides a field formatter for image fields that use the HTML5 picture tag and source sets. Utilizing the Breakpoint module, mappings to breakpoints are made to denote an image style to be used at each breakpoint.
The responsive image field formatter works with using a defined responsive image style. Responsive image styles are configurations that map image formats to specific breakpoints and modifiers. First, you will need to define a responsive image style, and then you can apply it to an image field.
In this recipe, we will create a responsive image style set called Article image
and apply it to the Article
content type's image field.
You will need to enable the Responsive Image
module, as it is not automatically enabled with the standard installation.
Configuration
and then to Responsive image styles
under the MEDIA
section. Click on Add responsive image style
to create a new style set.Change the font size
Change margin width
Change background colour