I am working on a project to get better at Flask, and I am using an image which is stored in my assets file (maindirectory>static>assets>myimage). While I got the images to appear just fine, they are weirdly squished, regardless of how I adjusted their heights. These heights worked just fine when I built the pages and embedded in HTML, so I am a bit confused.

My embed:

<img src="{{ url_for('static', filename='assets/t1.jpg' )}}" height="30%">

I embedded this image with

<img src="{{ url_for('static', filename='assets/t1.jpg' )}}" height="30%">

I know it is properly grabbing the image since it's showing up, but it is squishing for reasons I cannot understand. I was expecting it to look like it did when I used <img src="../static/assets/t1.jpg"> (which looked fine)

CodePudding user response：

I hope you find one of these two options useful.

1. write object-fit:cover to img tag;
2. Write the width in percentages and the height:auto;

CodePudding user response：

VPfB's suggestion worked--changing it to pixels instead of a percentage fixed it. Thank you!