Can you explicitly set the width and height of different size images in Webflow when using dynamic CMS Image Gallery or a Multi-reference Field?

Published on
September 22, 2023

When using the Webflow CMS Image Gallery or a Multi-reference Field to display images of different sizes, you have the ability to explicitly set the width and height of each image. This allows you to maintain control over the visual consistency of your gallery or grid layout.

To accomplish this, you can follow these steps:

  1. Accessing the Image Settings: Go to the Collection List or Collection Page where you have the dynamic CMS Image Gallery or Multi-reference Field set up.

  2. Selecting the Image Element: Identify the specific image element within the Collection List or Collection Page. This is usually a div block or an img tag.

  3. Applying Custom Classes: Apply a custom class to the image element. You can do this by selecting the element and then clicking on the "Settings" tab in the right panel. In the "Custom Classes" field, add a class name. For example, you can name it "custom-image-size".

  4. Defining Image Width and Height: Under the "Custom Code" section within the "Settings" tab, select the "Embed" tab. Here, you can add custom CSS code to target the specific class you just assigned to the image element.

  5. Writing CSS Code: To set the specific width and height of the image, you can use CSS code like the following:

    ```css
    .custom-image-size {
    width: 300px;
    height: 200px;
    }
    ```

    Replace the width and height values with your desired dimensions.

  6. Preview and Adjust: Preview your changes and make any necessary adjustments to the width and height until you achieve the desired visual effect. Repeat the process for any other image elements you want to modify.

By following these steps, you can explicitly set the width and height of different-sized images within the Webflow CMS Image Gallery or Multi-reference Field. This approach enables you to maintain a consistent layout while minimizing distortion or other visual issues.

Additional Questions:

  1. How do I create a dynamic CMS Image Gallery in Webflow?
  2. Can I change the layout and style of a dynamic CMS Image Gallery in Webflow?
  3. What is a Multi-reference Field in Webflow and how can I use it to display images?