How do I prevent image aspect ratios from changing on smaller screens?

Hi there,
I’m using the hyde-x theme on my site. When I upload an image and view the site on a mobile device or a narrow browser window, the image aspect ratios get distorted so it looks tall and skinny. What seems to be happening is that the width shrinks but the height won’t shrink past a certain point.

I assume this is something to do with responsive design. Is there a place to fix this in the css? Or do I need to export a certain specific image size?

Thanks!

I think I’ve answered my own question. Based on this suggestion, I added height: auto to the img part of the theme’s pool.css file and that seems to have fixed it.

This fix sound like something all the users of that theme want - could you open up a Pull Request with the change to the theme?

Ok, more on this problem. It turns out that the images are only distorted if you specify a height in the image tag (even if you didn’t specify a width… as best as I can tell).

I don’t typically specify heights, but all of the images exported from my old wordpress site (exported using the Wordpress to Hugo exporter) had specified heights thanks to Wordpress. The height: auto fixes the problem, but it might not be a problem if you don’t specify heights.

If you are using bootstrap, just apply

img-responsive

class on the image element. That should be it. For other frameworks, please refer to their documentation.