Blog - Making thumbnails images the same size

Design help General
1

Hi there,

I am working on this project:

https://preview.webflow.com/preview/newsfusionmodelsnyc?utm_source=newsfusionmodelsnyc&preview=9496379f713b1925a1c447107c48403e

Please check the Static Page called HOME 2

I am happy with the responsive aspect of it but can’t figure out how do I make the thumbnail images the same size without loosing the way they stretch when I increase or decrease the browser.

Many thanks for your help.

G

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Click on the Tablet breakpoint at the top of the viewer where you have the four device icons, to start with.
Then click on the CMS Collection Item that you have classed as dyn flex child home2
Now on the Style panel, open up the Flex Child section and change this:
image
To something that will hold fewer items horizontally so that the items may be larger. Try bumping up the Basis to something like 33 (to hold 3 items), or even 50 (to hold 2 items wide), like this:

image
image1704×1808 557 KB

(That’s set at 50).
Find out which is to your liking, then click the landscape device breakpoint at the top of your viewer, and change the same setting on that one for each breakpoint.
Basis, in case it’s too confusing, is the percent of the total that each item will take up, as a starting point.

Hope this helps.

3

Responsive is:

width: 100%;
height: auto;

But responsive images is not like saying “same size for all images” - maybe you talk about aspect ratio (“Crop”?)

https://alligator.io/css/cropping-images-object-fit/

4

Thank you @Lux but this not really what I am after. What I am trying to achieve is to have all the images looking the same on the desktop version to start with.

@Siton_Systems also, thanks, have not been able to make this work but when I do this should sort out 50% of my problem

@cyberdave @vincent @PixelGeek @zbrah is there any chance you could help here?

5

Add screenshot of the result you want (No way to help you like this). (By photoshop maybe).

6

@Siton_Systems

Something like this:

7

Ok. First you didn’t use the correct implement of the “aspect ratio” and “cover” idea trick.

You put her fixed sizes (Wrong)
image

8

@Siton_Systems you are looking at the wrong page. Please check HOME2. Thank you for your help

9

Please follow this tutorial i create now (I find a lot of Q about this topic):

10

@Siton_Systems oops, oops, much better. Thank you very much. Is there a way, to keep the ratio when you resize the browser so the images do not crop?

11

The aspect ratio always save.

You should decide without crop (Masonry) or “crop” (The idea above) (Of course you can use masonry for the cards).

Add screenshot of the problem.

12

@siton_systems

More than a screenshot of the problem, here is what I am trying to achieve. Here is a new video:

Basically, I would like all the posts to be same same size always and to keep their proportions when you reduce or increase the size.

What do you think?