How to auto-adjust image height so they don't get cropped on tablet?

Hello,

On all my portfolio pages, everything is looking good on desktop and also on mobile but there is a weird space in between that is cropping all my images 😣 (tablet view, breaking point seems to be around 765 px).

Let me show you

Here is the desktop:

Mobile is fine as well:

But when I set the screen to 750px for example:

All my images are a different size so I need a code that tells the image to adjust the height, while keeping a full width after the breaking point on tablet.
I tried some things but nothing works so I am looking for help.

I attempted to add:
@media only screen and (max-width:767px) {
.sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  object-fit: contain !important; }}
this way you see the whole image but it is not full width, so I have different gaps on the sides of each image -ugly 🙁-

Also tried to add this code to the first one:
width: 100% !important;
height: auto !important;
then it looks like before only it crops the image from the bottom instead of keeping it centered 😫


Here is the link: https://www.pastekart.com/portfolio-projets-1/022-collection-affiches-evenements
and the password: squarewebsites

If you have any idea on what to try?
Any help is appreciated, thanks! 🥰

Have you figured it out?

unfortunately, no...
From your previous answers to other posts, I managed to do it with block ID on each individual picture, but it is not a solution here (I have this on all my portfolio pages). If you have any idea for me to try?...

On 2/20/2024 at 5:07 PM, Leti said:

unfortunately, no...
From your previous answers to other posts, I managed to do it with block ID on each individual picture, but it is not a solution here (I have this on all my portfolio pages). If you have any idea for me to try?...

Which code did you try?

I didn't keep it.... but from memory, it was like:
@media only screen and (min-width:480px) and (max-width:768px) {
div#block-ID {
min-height: unset !important;
height: 30vh !important }}

This worked for ONE individual image, but I can't do it for all since they all have to adjust height differently depending on each image so 30vh does not apply everywhere 😣

If you have any idea how to do it for all the pictures at the same time?? Every beginning of a solution I saw on forums is targeted to isolated images so I did not find anything useful (I am rather new at this code thing 😉)

On 2/21/2024 at 10:54 PM, Leti said:

I didn't keep it.... but from memory, it was like:
@media only screen and (min-width:480px) and (max-width:768px) {
div#block-ID {
min-height: unset !important;
height: 30vh !important }}

This worked for ONE individual image, but I can't do it for all since they all have to adjust height differently depending on each image so 30vh does not apply everywhere 😣

If you have any idea how to do it for all the pictures at the same time?? Every beginning of a solution I saw on forums is targeted to isolated images so I did not find anything useful (I am rather new at this code thing 😉)

So you need a code will target multiple images with same 30vh value?

not at all... it is the problem, since all my images have a different size, I need a code that allows each image to be full width AND adjust proportionnally in height so they are not cropped.
Right now, I have this:

I need this:

I don't know why it works perfectly on desktop and mobile and it does this weird crop in the in-between?
I know not many people are using tablets but it is going to be my professional website and if all my portfolio pictures are cropped, it is not good 😫

So it's easier for you and you don't have to go look for it again:
Here is the link: https://www.pastekart.com/portfolio-projets-1/022-collection-affiches-evenements
and the password: squarewebsites

And I have images like this on all my portfolio pages so it is not really an option to go and target each id block and adjust manually all heights unfortunately 😣

And as I said in my original post, the command 'object-fit: contain !important' works to show the full image but then it is not full width so it has a very weird look with different gaps on each side of the images

If you know a way either to adjust automatically the height or to add something to this 'fit-contain' so the image is also full width, it would be so nice.
Hope it is clearer 😊
And thanks for all your help!