2015-02-01

画像の縦横サイズの追加

自前の画像を参照する時にwidthとheight属性を追加すると激しい腹痛におそわれる病を長く患っていたけど、どうやら完治したようなのでバッチ処理で追加してた。ついでにimg要素の各属性の記述順序なども書きかえたりして、楽しく時間を浪費した。大いなる無駄だが、他人には迷惑をかけないし、途中から段々トランスしてきた。

サイズを明示した画像がはみ出すことへの対策にはCSSでmax-widthプロパティーを使う。それだけだと縦横比が狂ってリサイズされるので、以下のようにheightプロパティーも併用するのが良い。

img {
  height: auto;
  max-width: 100%;
}

@supports (object-fit: scale-down) {
  img {
    height: auto;
    max-width: none;
    object-fit: scale-down;
  }
}

こういう時はobject-fitプロパティーの出番のはずなので、このように更に@supportsルールを使ってやるとChrome 31以降とFirefox 36(まだ安定版ではない)以降でscale-downを使うようにできる。しかしobject-fitプロパティーをサポートしているSafari 7以降で@supportsルールがサポートされていないという問題があるので、もうちょっと工夫した方が良さそう。

バッチ処理にはimagesizeパッケージを使って、オレオレGruntタスクとして書いてやった。Grunt使うとファイルのリストアップと非同期処理がラップされるので、こういう一括処理のツールを書き捨てる時にもすでに導入されているプロジェクトならちょっと使ってやると楽できる。