Hi,
I am using the new Pro grid to try and create an aligned grid (see screenshot attached). My aim is to get an even height of the images within the grid. I cannot seem to find a way to use “cover” as the method to keep the sizes correct. For larger screens I am using the grid size (2 columns) of 33.3% / 66.6%.
Please can you advise how to do this. Credentials in a Secure Note.
Many thanks,
Christopher
Hello Christopher,
Thanks for writing in!
The cover only applies to the background property. You use cover as the size of the background size. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the
background-image: cover;which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.
Yes we can use
background-size: 100% 100%;which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.
Yes we can also use
background-size: 100% auto;but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use
background-size: contain;but then this is not a good choice because you will see white spaces around your image.
Hope this helps.
Hi RueNel,
Thanks, not quite the answer I was expecting, but you have led me to precisely the result I wanted! I was trying to work with the Image Element, but thanks to your response I suddenly realised that a Grid Cell can use a background image, just like a Section, Row and Column. Perfect, thank you,
Christopher
You are most welcome Christopher!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.