How to make an image(fixed ratio) resize based on % of height and not width

Need help Responsiveness
1

I’m having this issue right now, trying to build a mobile app and the images that are fixed ratio, doesn’t stop growing in height, surpassing it’s group height, because the image change dimensions based on width, if the image wasn’t fixed ratio, I wouldn’t have this problem but the image would get distorted, and it looks horrible when it stretches

I think it can be fixed by making the image change its dimensions based on the % height of the group or maybe setting the picture to stop growing when it reaches its group width or height

But I don’t know how to do it

Any thoughts on how to make this possible, It might be possible with conditions but it would be too much hassle

Here’s a video so you can see what I mean

Why would I want that? Because if the app gets in landscape mode I want it to be responsive

GIF-220826_210423

2

Just use “vw”.

Attach an ID to the image and have it resize based on VW.

Just a little custom CSS.

EDIT:

You want to use the images “make image same width of parent element”.

3

VW or VH? I tried to use css tools adding a class to the image, and when I try to use vh or vw I takes the vh-vw from the whole page and not the container, how to I fix that?

4

I know this post is 2 years old, but maybe I can help someone looking for a solution in the future

In my case, I needed a way to set a dynamic image with a fixed height of 60px and width based on the image’s natural aspect ratio

I managed to solve this with the HTML element with the code below

<div style="display:flex; align-items:center;">
  <img src="https:DYNAMIC EXPRESSION WITH IMAGE URL" style="height:60px; width:auto;" alt="Logo">
</div>
2 Likes