megclaypool of Rootid
3/25/2020 - 2:41 PM

Setting an aspect ratio on cards that still lets them expand with excess content

This is a refinement the ::before trick from CSS-TRICKS: Aspect Ratio Boxes, adapted to flexbox and applied to our Radicati card structure.

The advantage of this slightly more complicated technique is that (unlike with padding-top applied directly to the div and the contents set to position: absolute) if the contents of the div are longer than the space allotted by the proportion, the div will expand to fit (thus breaking the proportion but saving us from nasty overflow!)

This would be used for cards appearing as a single block, like in a block listing (as opposed as a row-style listing).

Here's a Basic Example on CodePen

card_style.scss
content_copyfile_download
@import "../../variables";

.card--FOR_THE_LOVE_OF_GOD_BE_MORE_SPECIFIC_THAN_JUST_CARD {
  display: flex;
  // NOTE: flex parents default to "align-items: stretch". HOWEVER, this only works if the flex children DO NOT have a height set. Even height: 100% will make this not work!!!
  
  &::before {
    content: "";
		width: 1px;
		margin-left: -1px;
		height: 0;
		// use the dimensions from the design here -- height / width :)
		padding-top: (200px / 1440px) * 100%;
  }

  .card__inner {
		// IMPORTANT NOTE: "align-items: stretch" on the parent only works if the flex child doesn't have a height attribute!
    display: flex;
    flex: 1 1 100%;
    // we need to set position: relative so this div will be the positioning parent of the .card__header div
    position: relative;
  }

  .card__header {
    height: 100%;
    position: absolute;
    width: 100%;

    .card__image {

      height: 100%;
      padding: 0;
      width: 100%;


      img {
        // setting display: block removes the odd little space that displays after an inline element
        display: block;
        height: 100%;
        // object-fit doesn't really work on ie, so try to make sure your image is properly cropped on the backend
        object-fit: cover;
        width: 100%;
      }
    }
  }

  .card__body {
		flex: 1 1 100%;
		// without this position: relative, .text is hidden behind the background image.
    position: relative;
  }
}