image resize
How do I make an image resize and take the same height and width as my line?
I'm trying to make the left IMG look like the right one
![No description](https://cdn.answeroverflow.com/1160447338758799481/Screenshot_2023-10-08-00-01-55-926_com.android.chrome.jpg)
![No description](https://cdn.answeroverflow.com/1160447338993688666/Screenshot_2023-10-08-00-01-49-217_io.spck.jpg)
10 Replies
You have to put the image and the text probably in a container and apply flex, so that you make both image and the text inline. Then give a max-height property on the image.
Looks cool! What are you building
Thanks. I'll try that out
It's frontend mentor challenge https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U/hub
Frontend Mentor
Frontend Mentor | NFT preview card component hub
NFT preview card component Challenge Hub
It worked great. I used a width and height auto before. But using just height, I didn't need to set the width, so 1 less line of code which isn't bad I guess
@Senra @Riky i know this is a bit late but i thought i'd pitch in 😅, you don't need flex for this at all, and i don't believe you need a max-height, i think you can use an aspect ratio for it?
It's never too late to learn something new in the dev world. As for aspect ratio in CSS; never heard of it nor know how it works
true true 😅, you can check out the description and uses here, https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
aspect-ratio - CSS: Cascading Style Sheets | MDN
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and ...
here's an example using aspect-ratio- https://codepen.io/deerCabin/pen/yLGrGJa
Yes you can, but with the aspect ratio, we need to define either a width or a height. To make it smaller/ the correct size. The default size of the image can be bigger