How to set msGallery to auto-height in a product?

Question

MODX

how to resize an image and make it auto-height?
now I can’t figure out how to implement to reduce the picture and make auto height tell me.

Here is the slider code

<div id="msGallery">

    {if $files?}
        <div class="fotorama"
             data-nav="thumbs"
             data-width="100%"
             data-thumbheight="45"
             data-allowfullscreen="true"
             data-swipe="true">
             >
{foreach $files as $file}
                <a href="{$file['url']}" target="_blank">
                    <img src="{$file['webp']}" alt="{$file['name']}" title="{$file['name']}">
                </a>
            {/foreach}
        </div>
    {else}
        <img src="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium.jpg'}"
             srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium2x.jpg'} 2x"
             alt="" title=""/>
    {/if}
</div>

Answer 1

Может кому-то нужно вот решение
<script>
  fotoramaDefaults = {
    width: 700,
    maxwidth: '100%',
    ratio: 16/9,
    allowfullscreen: true,
    nav: 'thumbs'
  }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

source https://fotorama.io/docs/4/options/