What's the Best CSS Method to Resize Pictures Without Stretching (Keep Ratios & Proportionality)

[bernard]

What's the best way to resize pictures from feeds without stretching?

I can either choose between stretching the pics to make each row item the same size (fixed height) or not stretch the pics, but have the row items be a different size (fixed width).

Unless of course it's possible to "fill out blank space" with css, so I can scale the pics to keep their ratios and then add padding or margin automatically, so the containing div has the same size across all items?

 

[CCarter]

What's the best way to resize pictures from feeds without stretching?

When i get a moment i can write up the css code, but choose a size, lets say 300 width by 300 height. Make a DIV element that exact size. Then use the image as a background. Then make the image clickable, with a magnifying glass onto, so users can click and see the large size image.

A better solution is to have a script download the image and crop it for you, then use that image in your row and allow it to be clickable to see the full size.

The best solution is to not waste time with perfection, and just give people a renderable image at whatever acceptable height and move on to something that will actually make more new revenue, cause absolutely no user is going to stop and say “hey these rows are great looking, now let me make sure I purchase from this website extra harder cause they took the time.”

You have to know when you are wasting your time on a “no money project”.

 

[bernard]

When i get a moment i can write up the css code, but choose a size, lets say 300 width by 300 height. Make a DIV element that exact size. Then use the image as a background. Then make the image clickable, with a magnifying glass onto, so users can click and see the large size image.

A better solution is to have a script download the image and crop it for you, then use that image in your row and allow it to be clickable to see the full size.

Thanks, I will experiment with both.

I agree that it's not going to make or break success here, but this is a part-time learning project (scraping/feed/importing), for a service I'm going to launch and I know from experience that a lot of people instantly focus on these details first and at least it would be good to have an answer.

I think I might experiment with writing some code in the WPAllImport function editor.

 

[Ryuzaki]

What's the best way to resize pictures from feeds without stretching?

I can either choose between stretching the pics to make each row item the same size (fixed height) or not stretch the pics, but have the row items be a different size (fixed width).

Unless of course it's possible to "fill out blank space" with css, so I can scale the pics to keep their ratios and then add padding or margin automatically, so the containing div has the same size across all items?

Background-Size: Cover;
Like CCarter said, there's the background-size: cover; attribute for CSS. It's pretty easy to cook up. Going off the top of my head, you do need a parent div set to the right sizes and then the image will "cover" the area, meaning it'll grow or shrink in size proportionately and even be clipped in order to preserve the proportionality. You have to set background: url('image-path/image.jpg'); and background-repeat: no-repeat;.

The only thing is, you'll have to set your images inline using inline CSS so you can have them be the "background." Depending on how your feed is set up, this might be easy for you, or might require some Javascript or jQuery. If you've pulled it into a database and can run loops, then that's easy too.

Object-Fit: Cover;
I don't like using inline CSS. There's a lesser known approach involving object-fit: cover;. It does the exact same thing with the clipping and keeping things proportional and centered, but you don't have to set the image as the background url. You can apply the CSS to the image like .parent-div img { ... }. It's cleaner, modern HTML / CSS and faster for the browser to render since it can apply one set of attributes to all instances, rather than parsing each set of inline rule over and over. All you need to do is set the parent div's size.