Tell us what you are trying to do?
I am trying to display logo's in a view. They can be all sorts of ratios (portrait, landscape, and all variations in between). Using the image size setting in the block editor I have set the width of the image to be 80px, and this way height is auto-sized. This works well, but landscape logo's appear a lot larger than portrait logo's.
I would like to be able to fit every logo in say a 80x80 format where the images are contained (not strectched).
Is there any documentation that you are following?
I have tried some custom CSS settings but have not been succesful. I tried to place the image in a container block. Then I set the dimensions of the conatiner block to 80x80 and gave the image a CSS property of 'object-fit: contain;'. This did not work and I think that was because in the block editor you are forced to set an image size as well. Here's a link to a solution I tried to implement: hidden link
Is there a similar example that we can see?
Can't think of an example at this moment, but think of a list of logo's that all fit inside a 80x80 container without being stretched.
What is the link to your site? hidden link
You'll see the view on the homepage.
Hello. Thank you for contacting the Toolset support.
As I understand, you are talking about the logo displayed at left side with each loop item. If that is correct - Can you please tell me what is your expected results.
With what image you are facing issue with? Maybe few screenshots would help to understand with what image you are having issue and what we can do here.
Maybe you are talking about the first item logo. If you can see the logo it self have a small visual image and having text as well:
=> hidden link
It looks like its displaying correctly, Please let me know if I am missing anything here.
Yes I'm talking about those images, but maybe I should have explained more precisely what I mean. Also, I forgot to attach these images which might have clarified the question for you.
As you can see all images are now set to width 80px. This means that, even though all images are 80px wide, for landscape images the height might be 50px but portrait images could be 140px. The result is that the logo's in the view loop all seem to have different 'sizes'. As an example, if you look at the attached image of the front end the second logo appears much larger than the third.
I would like to also set a 'max-height' property of 80px to ensure the images all have a similar size, meaning they would all fit inside an imaginary box with 80x80 dimensions, withouth warping/stretching. This way the logo's will have a more generic look to them.
I would say the it depends on the size of the image and I do not have any way to offer you to control it.
As you can see the following images those image dimensions are different and those images are having the extra transparent background (white background) is available. Maybe you need to regenerate your logo file or upload the logo image files in specific dimensions and then you will have the expected output.
=> hidden link
=> hidden link
