Problems with Hyas.Images distorting photos

[cnichte]

Hello :-) - I don't know if this is a problem of the Docs-Theme or a problem of Hyas-Images.

I really try to get Hyas images to fly, but no matter which parameters I try, according to the instructions...

The images are always displayed distorted. Here, for example, I have a square image (1000x1000):

https://carsten-nichte.de/info/

{{< figure
  process="crop 1000x1000 center"
  src="images/carsten-nichte-1000x1000.jpg"
  loading="eager"
  fetchpriority="high"
  sizes="auto"
  class="blur-up lazyautosizes ls-is-cached lazyloaded"
  caption="...." >}}

In the blog, the images (all the same landscape format) were previously displayed in the correct aspect ratio, but since the last Hyas update, the images also distort. If you change the size of the browser window, you can see how it plays out.

https://carsten-nichte.de/blog/

What am I doing wrong there?

Ps. In all other areas of my website I do not use Hyas-Images, and there the AspectRatio keeping works perfectly. I just don't understand what Hyas-Images in combination with Doks is doing there...

Every hint is welcome - best regards Carsten

[cnichte]

I get the both topics fixed when I change

in /node_modules/@hyas/doks-core/assets/scss/components/_images.scss

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

like so

img[data-sizes="auto"] {
    display: block;
    width: 100%;
    height: auto;
}

is it worth an update of doks-core ?

[h-enk]

This just works

[h-enk]

This needs an added class: h-auto

[cnichte]

Thank you very much. Just for understanding: h-auto is neither a boostrap class, nor does it come from Hugo, but is a Hyas feature?

[h-enk]

No, it is a Bootstrap class — see also Sizing