I have a few images of different sizes. How do I display those so they adjust to different screen sizes ? Do I use flexbox, grid, masonry layout…etc? Some of the images have different aspect ratios than the other.
Ignoring all the AI answer responses that your question will trigger the question really depends on what precisely you want to do with the images and where you are putting them.
Once you have decided how you want to display them then you can decide which css method is the best approach. Grid, flex or whatever else may be suitable but until we know how you would like them displayed then any other answers are just guessing and generic.
There are however a number of certain points that will need to be addressed.
Such as:
Are all images to be the same width and height irrespective of their aspect ratio? If so then they will need to be cropped in some way which is no use if you have an image of a person and you cut their legs off or if the image has to be displayed in full as it contains vital information that you don’t want cropped out.
Is the gallery in even rows and columns or is it going to be a mix?
Is it one image per viewport width? If so then you may need to use a srcset (or picture element) to supply different images for different resolutions.
In essence all you need to do to make an image responsive is to set its width to 100% and its height to auto. However if your image is only 100px at its native resolution then stretching it to 2500px of a viewport is not going to look good.
Think about what you want and then ask the question again with the specific of what you want to achieve 
2 Likes
Try to using
<picture>
<source srcset="https://example.com/photo_mob.jpg" media="(max-width: 640px)">
<source srcset="https://example.com/photo_desktop.jpg" media="(min-width: 641px)">
<img src="https://example.com/photo_desktop.jpg" alt="Photo....">
</picture>
I figured most of my images have 3:4 aspect ratio. I used flexbox for layout. Each row has 3 images with hr as separator. Images were not shrinking but I used min-width: 0 as you suggest here https://www.sitepoint.com/community/t/flex-shrink-behaviour-on-images-and-content/394594/4 and it works.
.work .project > img {
flex: 1 1 content;
min-width: 0;
}
Please take a look https://test.prygara.com/gallery/
I used 600x800 px image sizes (scaled down some of a bigger images and up some smaller images). Say I want to make original images a bit smaller, say 480x640, in desktop view keeping the same 3:4 aspect ratio. I did try adding width to the above declaration or use desired width as flex-basis but it didn’t work 
or do I just make my images 480x640 (scale them) and upload new image size?
I’m not quite sure what you are asking here.
You have three images across with flex which means they will each be a third of the available viewport width (as the main container is full width). therefore on say 2400px wide viewport the largest the image width would be would be 800px.
Therefore I don’t see a need to make smaller or larger images as you could scale down from 800px quite nicely without too big a file size and no need to make smaller images.
If you wanted the images displayed smaller then you would have to limit the width of the container that holds the images otherwise if you restrict the image to say 480px max-width then there will be big gaps in the flex layout.
Remember that flex will usually win out over a width that you have set but you can set a max and min-width if needed but as I said that will make gaps as you have them displayed across the viewport.
If you just wanted them centred but not full width then I would set a max-width on the project div.
e.g.
.work .project{
max-width:1280px;
margin:auto;
}
Of course it all depends on what you were intending to do and whether you liked the full width but the images just seem too big on my monitor at full width.
1 Like
In a current layout setting a container width looks better. I agree if I limit image width with min/max-width, the gaps between images are just too big.
1 Like
I also noticed that.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.