🥇 Substituição responsiva de imagem

Dê uma olhada e me diga o que você acha.

O mixin cria uma imagem de fundo que atua como uma imagem responsiva com largura máxima e uma proporção intrínseca.

@mixin image-replace($width, $height, $image) {
  $ratio: $height / $width * 100%;

  display: block;
  width: 100%;
  max-width: $width;
  height: 0;
  padding: $ratio 0 0 0;
  overflow: hidden;
  background: url($image) center center no-repeat;
  background-size: contain;
}

O suporte do navegador é definido pelo tamanho do plano de fundo, portanto, não há IE8 e nem Opera mini. Mas é para isso que servem os fallbacks.

Notas

Parece que isso só funciona se tiver um elemento de invólucro que se reduz à largura do elemento substituído. Pode ainda funcionar com alguns ajustes.

Related Posts