Force or Allow true aspect ratio

How To
16

Hi Karen,

here is a code example that only works under the following conditions:

Posts Element Settings
Everything not mentioned is in it’s default state

  1. Layout » Layout: “List”
  2. Layout » Direction: “vertical”
  3. Image » Image Size: set to something not square (e.g. Medium Large)

Example for Landscape Images / Direction: vertical

Let’s say you prepare / crop all of your images to 1200x900 (4:3 Aspect Ratio) and upload them to your posts.

The default background-size of the posts element images is set to “cover”, which ensures that the image fills up the available space on both axis. As we want the image to keep its aspect ratio, we’ll have to set the background size to “contain”, so the image will only fill up the available space on the horizontal axis.

root .bricks-layout-type-list .image {
  background-size: contain;
  /* background-size:cover; */
  /* background-size: 100%; */
}

Doing so, all images (regardless if they’re square, portrait or landscape) will keep their original aspect ratio, but won’t fill up the available space, which looks kind of messy.

So far, so good. Now comes the tricky part (might be interesting for you too @alanj) that depends on your image size / aspect ratio. This is important, because of how css background images work.

To “calculate” the height of the wrapper (the .image-wrapper needs a height, because the background image cannot have a height), you have to do some math:

root .bricks-layout-type-list .image-wrapper {
  /* Image Height divided by Image Width * 100 = padding-top */
  /* 900/1200 * 100 = 75 */
  padding-top: 75%;
}

That’s it. All of your (landscape) images will now have a correct aspect ratio. If you set the background-size to 100% or cover (like default) instead of contain, even square and portrait images will look like as they are landscape images (they will be “soft cropped” like the default ones). This ensures a consistent, not messy look if your post images will vary. So if most of your post images have the same aspect ratio, this seems to be a good compromise. If they are all even, it doesn’t make a difference anyway.

Here are some more examples for different image sizes (square, portrait, landscape), but the principle is always the same.

root .bricks-layout-type-list .image {
  background-size: contain;
  /* background-size:cover; */
  /* background-size: 100%; */
}

/* Square Images 768x768 */
/* 768/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 100%;
}
*/

/* Portrait Images 768x1152px */
/* 1152/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 150%;
}
*/

/* Landscape Images 768x512px */
/* 512/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 66.666%;
}
*/

Default / Horizontal Layout

With the Layout » Direction: “horizontal” (which is default), the code is a little bit different, but also depends on the image size / aspect ratio (in this case our demo size is 1200x900 (4:3 Aspect Ratio) too).

root .bricks-layout-type-list .image {
  background-size: cover; /*which is the default, so you can leave it out */
}

/* Larger Screens starting from 768px */
@media (min-width: 768px) {
  root .bricks-layout-type-list .image-wrapper {
    /* Image Height divided by Image Width * 100 divided by 2 = padding-top */
    padding-top: 37.5%;
  }
}

/* Mobile screens up to 767px */
@media (max-width: 767px) {
  root .bricks-layout-type-list .image-wrapper {
    /* Image Height divided by Image Width * 100 = padding-top */
    padding-top: 75%;
  }
}

I’m on vacation now … so it could take a while until I answer if there are any questions.
Btw., I’m not an official support guy :sweat_smile:

1 Like