I'm making a small review card project.
I got the functionality of the card and how I want everything placed. Problem is I want all the pictures to stay the same size without having to set media queries every like 150-200px
I know I can get the initial width/height of the images with no problem. But If I set the images to an initial size is there a way for me to then scale it from that initial size with say the viewport width or viewport height? They are all the same aspect ratio, so I found a size that works for all pictures as the initial size
For those looking for a similar solution I did a portion outside of the code as it made it a lot easier. I just cropped the photos and set them all to the same aspect ratio to start off.
Then I was able to set an initial width on my images to a pixel length.
Then use @media queries to keep them scaled properly for larger screens, I only had to do it for 4 different screen sizes to keep the layout looking proper.
Example:
image {
width: 300px
}
@media screen only and (width: 1920px) {
width: 800px
}