In /admin/config/media/responsive-image-style. I created a responsive image style. The breakpoints group is bartik so now I have 3 breakpoints. Wide, Narrow and Mobile. I want to use a new image style I created called small, its 80x80 scaled pixels. I set all 3 breakpoints to use small. But in Mobile I want the image to stretch a little maybe have it go from 120 wide to 80 wide. Is this possible? Does that make sense? If I select multiple image style under small this field appears Enter the value for the sizes attribute, for example: (min-width:700px) 700px, 100vw. What does this mean and where can I find some format examples?


Is this possible?


Does that make sense?

That depends on your design, not our opinions. ;)

You should create an image style for all variations of an image you can have. So if your default 'small' style is 80x80 and you want to use 120x80 as well, you should create a new image style 'small_mobile'.

The purpose of the sizes attribute is explained in this change record:

The sizes attribute tells the browser how much space this type of image will take up in the browser at various breakpoints. The image styles you select gives the browser multiple options to select an image source that is appropriately sized for the amount of space available at a particular breakpoint and screen resolution.

It is also explained in Drupal's built-in help system:

Sizes field

Once the sizes option is selected, you can let the browser know the size of this image in relation to the site layout, using the Sizes field. For a hero image that always fills the entire screen, you could simply enter 100vw, which means 100% of the viewport width. For an image that fills 90% of the screen for small viewports, but only fills 40% of the screen when the viewport is larger than 40em (typically 640px), you could enter "(min-width: 40em) 40vw, 90vw" in the Sizes field. The last item in the comma-separated list is the smallest viewport size: other items in the comma-separated list should have a media condition paired with an image width. Media conditions are similar to a media query, often a min-width paired with a viewport width using em or px units: e.g. (min-width: 640px) or (min-width: 40em). This is paired with the image width at that viewport size using px, em or vw units. The vw unit is viewport width and is used instead of a percentage because the percentage always refers to the width of the entire viewport.

Image styles for sizes

Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the Image styles page that is provided by the Image module.

Finally, if you always want to use 120x80 on mobiles, you can select a single image style.

  • No problem, I hope the update explains it even better. – Neograph734 Sep 8 '17 at 10:18

Responsive Image Style: Here you can tell WHEN and WHAT STYLE to apply Image style: Here you can tell WHAT OPERATION should take place on the original image.

Create a new image style with scale & crop (or whatever fits you) first, and then set this image style to the right Responsive Image Style interval (in your case the smallest)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.