Как изображению задать размер?

Хочу исправить размер изображения, чтоб было квадратным.

К примеру взять Галерею, там изображение квадратное или подраздел Объявленный, код от туда.  

.ipsThumb_bg.ipsThumb_medium {
    width: 230px;
    height: 230px;
    border-radius: var(--button--radius);
}

.ipsThumb_medium {
    max-width: 230px;
    max-height: 230px;
}
.ipsThumb_bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
   background-color: rgb( var(--theme-area_background) );
}

Прописал в шаблоне классы , но оно сжимает фото.

<div class='ipsColumn sdColumn_veryVeryWide'>
    <div class='ipsType_center ipsContained' data-controller='sdsalespro.front.offer.screen'>
        {{if $offer->photos()->getInnerIterator()->count( true )}}
            {{$donePrimary = false;}}
            {{$fullScreenshots = iterator_to_array( $offer->photos() );}}
            <div class="ipsPad ipsBox">
                <a href='{$offer->primary_photo|raw}' class='sdSalesPortalProOffer_primaryImage ipsContained' data-ipsLightbox data-ipsLightbox-group='offerscreen' data-fullURL="{$offer->primary_photo|raw}"><img src='{$offer->primary_photo_thumb|raw}' class="ipsThumb_bg ipsThumb_large"></a>
            </div>
            <div class='sdSalesPortalProOffer_images ipsSpacer_both ipsBox ipsPad_half' data-ipsLazyLoad>
                <ul class='ipsList_inline ipsList_noSpacing'>
                    {{foreach $offer->photos( 1 ) as $id => $photo}}
                        <li>
                            <a href='{$fullScreenshots[ $id ]->url}' data-action='toggleImage' data-ipsLightbox-group='offerscreen' class='ipsAreaBackground_light'>
                                <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src='{$photo->url}' class="ipsThumb_bg ipsThumb_large ipsThumb_tiny">
                            </a>
                        </li>
                    {{endforeach}}
                </ul>
            </div>
        {{else}}
            <div class="ipsPad ipsBox">
                <div class='ipsNoThumb ipsThumb_large ipsNoThumb_product'>&nbsp;</div>
            </div>
        {{endif}}
    </div>
</div>