Jump to content

How to make images not get cropped, but fit the height of the container

Recommended Posts

In the example site screenshot I attached, you can see in the image carousel that the full size images are shown without being cropped, whether they are vertical or horizontal (Example site: https://elisepfister.com/restaurant). 

I'd like to do that for the image sections on this website here: https://www.brooke-walding.com/photography

 

 

When I select "Original Image Size" some photos are obviously longer than others, etc.

Screen Shot 2023-08-06 at 10.17.48 PM.png

Link to comment
  • Replies 8
  • Views 4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...
20 hours ago, JoseMi said:

Hello! I have the exact same problem! Did anybody figure it out?  Seems like a simple ask - basically don't crop the images but keep them the same height.

Is the solution maybe to load images which are the same height to begin with?

If you share link to page where you use image, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 5 months later...
On 1/11/2024 at 5:51 PM, Robertopatella said:

Hello, same challenge here! I would like for all images, regardless of width, to fit the height of the container and be aligned vertically.  Here is a link to my gallery here: https://www.robertopatella.com/kevin-bacon-x-muse-magazine

 

Here is an example of the effect I would like: https://elisepfister.com/fashion

 

Thank you for your time.  Looking forward to your reply.

Heya!! Just wondering if you've gotten the solution? I'm trying to achieve the same look but struggling to do so!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.