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
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