How can I modify this code to change image shapes from rectangle to square?

[eru]

I found this code to make a image gallery, but the photos are rectangle and I would like it for them to be a square(like the products in collections)

Does anyone know what I need to change? This is the code

 <div class="grid collection-grid">
	  {% assign grid_item_width = "medium--one-half large--one-third" %}
      {% if section.blocks.size == 1 %}
        {% assign grid_item_width = "medium--one-half large--one-third" %}
      {% elsif section.blocks.size == 2 %}
        {% assign grid_item_width = "medium--one-half large--one-third" %}
      {% endif %}
      
      {% for block in section.blocks %}
        <div class="grid__item {{ grid_item_width }} collection-collage__item text-center" {{ block.shopify_attributes }}>
          <a href="{{ block.settings.link }}" class="collection-grid__item-link collection-collage__item-wrapper">
            {% if block.settings.image == blank %}
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              <div class="collection-grid__item-overlay grid__image">{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
            {% else %}
              <div class="collection-grid__item-overlay grid__image lazyload"
                   style="background-image: url('{{ block.settings.image | img_url: '50x' }});"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover">
              </div>

 
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
 
{{ block.settings.button_label | escape }}
 
</a>
              .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 500px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

            
            {% endif %}
        
          </a>
        </div>
        

      {% endfor %}

    </div>
  </div>
</div>

[vian_FoxEcom]

Hello @eru 

To adjust the height of the image, you need to add max-height after the max-width. Another way is to define the fixed dimension for both height and width, ensuring them staying square. 

Would be more useful if you share the URL of the page with the code here 🙂

If you're not super sure about CSS code, I suggest you use a reliable tool that offers pre-built elements like this one - you can use them right away.

Feel free to give Foxify Smart pagebuilder a try. Foxify has various sections and elements, namely a multicolumn section that lets you build a nice image gallery in a minute.