Responsive Image Styles -> How to implement?


I am having a whale of a time trying to set up responsive image styles. Learning Drupal 8.

Here’s the dilemma: We have large machines that are not all shot at the same angle or fit the same convenient aspect ratio.

Question 1 – Is that what Drupal is expecting image-wise?

Each product page will have a hero shot. Some of the hero shots are portrait orientation, and some are landscape orientation.

But if I am understanding the responsive styles – your supposed to create a single size per breakpoint.

That means some of my images will be floating while others will fill up the total size of the field.

Question 2 – Why can images occupy different spaces and scale responsively?

Question 3 – Or am I not understanding what is going on properly?

Question 4 – If I am not understanding it properly – is there a tutorial out there that explains it?

Any help is appreciated. Thank you.

Drupal version: