container for CSS updated feb 2024 - rationalising & tidying CSS after calendar changes

Image sizing

signpost

First image is sized by the image tool in CKEditor. I've selected one dimension & hit the lock button. The image has a border.

signpost

second image is sized by me. I've selected 150px x 302px. The image has a border.

Answers

signpost

What is happening? Well I think its due to the border, and as the image is not square, in order to keep the image the same aspect ratio, there's a bit of extra white space. But if we use object-fit:cover, it will crop to fit. (if we use contain, we'll need to resize to make it fit)

 

In the next example, I've set a width as a % and set the height to auto.

signpost

Powered by Church Edit