SCSS / Stylus – Mixin de cálculo de proporção de aspecto

Dado um elemento com largura xe altura y.

Nota escrita na sintaxe SCSS, mas funciona na caneta. Mas pode igualmente representado em atrevimento.

  @mixin aspect-ratio($width, $height) {
    position: relative;
    height: auto;
    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
    }
    & > .content, 
    & > .section-heading, 
    & > img,
    & > div,
    & > svg,
    & > path {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
}

Se agora você incluir em um estilo como
@include aspect-ratio(x, y)

Isso fornecerá a proporção de aspecto responsiva exata para a largura do bloco que você está chamando. Ele também pode direcionar blocos filhos para torná-los posicionados de forma absoluta.

Para resumir, você pode direcionar um elemento e adicionar um fundo a ele, você pode adicionar um elemento filho com a mesma proporção de aspecto e ter esse elemento posicionado no centro absoluto.

No momento, estou apenas visando esses elementos filhos.

& > .content, 
& > .section-heading, 
& > img,
& > div,
& > svg,
& > path

Versão da caneta

aspect-ratio($width, $height)
  position relative
  height: auto
  &:before 
    display: block
    content ""
    width 100%
    padding-top ($height / $width) * 100%
  & > .content, 
  & > .section-heading, 
  & > img,
  & > div,
  & > svg,
  & > path
    display block
    position absolute
    top 0
    left 0
    right 0
    bottom 0

Inclua

aspect-ratio(x,y)