Advanced Custom Fields/ACF

Web Design
#1

https://minyanavreichim.com/alumni-profiles/
The profile images displayed with ACF are not uniform in size. How do I make them uniform without stretching the image?

Background: (Please excuse the dummy text on the website!)

  • If I set the height and width then the images get stretched and blurry.

  • I can make it a background image and then do background-size:cover, but then I can’t add the ACF field as a background image. I am adding the acf with html/css, not in a template. I am adding the acf fields here without going into the php. Unless there is a way to add this into the functions.php.

If anyone has any suggestions it would be much appreciated.

#3

Firstly your reply is hidden? Not sure why?

I use object-fit, the support on caniuse.com isn’t awful.

I didn’t check your use case but other possibilities are adding an image size (or using thumbnail with cropping) and having it autocrop the images and use those.

Or crop before uploading :slight_smile:

#4

I solved this issue with object-fit.

What do you mean to add an image size? If I add height and width the image gets stretched.

How would I use autocrop? Meaning my client need to crop each image - or if not then how does that work?

By the way, don’t people update their browsers? Why do we need to be concerned about outdated versions. Or am I being naïve as a web designer - that not everyone updates browsers :smile: