More than 5 years have passed since last update.

アスペクトを保持したまま、background-imageのサイズを変更

Last updated at 2016-11-01Posted at 2016-10-21

アスペクトを保持したまま、background-imageのサイズを変更する。

@mixin flex-img($w: 16, $h: 9){
  width: 100%;
  height: 0;
  padding-bottom: ($h/$w) * 100%;
  background-size: contain;
  display: block;
}

.item{
  width: 100%;
  span{
    @include flex-img(320, 180);
    background-image: url(http://placeimg.com/320/180/tech);
  }
}

追記
PostCSSのパッケージpostcss-utilitiesに同じやつあった

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up