CSSだけで画像トリミングできたよ

HTML・CSS

サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。

運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。
CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。

やり方

HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。
例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。

CSSのトリミングは、パターンによってやり方がいくつかあるので、自分の仕様に合わせたものを選んでください。
今回の記事とは違うやり方でも同じようなトリミングができる方法があるので、参考記事として後ほど紹介致します。

HTML

<div class="trim"><img src="http://placehold.it/350x250" alt="" width="350" height="250"></div>
<div class="trim"><img src="http://placehold.it/400x400" alt="" width="400" height="400"></div>
<div class="trim"><img src="http://placehold.it/250x500" alt="" width="250" height="500"></div>
<div class="trim"><img src="http://placehold.it/500x250" alt="" width="500" height="250"></div>

CSS

/*　トリミングする外側の枠　*/
.trim {
    overflow: hidden;
    width: 200px;/* トリミングしたい枠の幅 */
    height: 200px;/* トリミングしたい枠の高さ */
    position: relative;
}

外側の枠でトリミングしたいサイズを指定し、画像をpositionとtransformで中央に配置します。
はみ出た部分はoverflow: hidden;でカットする、という仕組みです。
※transformは2016年6月現在、IE9、iOS8、Android OS4.3、4.4では、ベンダープレフィックスが必要ですので、対応環境に合わせて適宜調整しましょう。
marginで位置を調整することもできますが、画像サイズが違うと個別に値を設定することになります。transformを使うことで、個別に指定しなくても対応できるようになります。

transform対応状況参考：caniuse

CSS -　横幅に合わせてトリミング

/* 横幅に合わせてリサイズ、はみ出た分をトリミング */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

See the Pen trimming-width by chinen (@chinentam) on CodePen.

CSS -　高さに合わせてトリミング

/* 高さに合わせてリサイズ、はみ出た分をトリミング */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

See the Pen trimming-height by chinen (@chinentam) on CodePen.

CSS -　中央に合わせてトリミング

/* 中央に合わせて、リサイズせずに、はみ出た分をトリミング */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

See the Pen trimming-center by chinen (@chinentam) on CodePen.

CSS -　例外　トリミングせずにリサイズする

/* 画像の縦と横、大きいほうに合わせてリサイズ */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

See the Pen trimming-resize by chinen (@chinentam) on CodePen.

ご注意

それぞれの画像の縦横比があまりにもバラバラだと、上記のサンプルのようにレイアウトは崩れてなくても、どうしてもバラバラ感は出てしまいます。CSSでトリミングできるとはいえ、近い比率の画像で運用してもらう方が望ましいです。
画像の中心に合わせてトリミングするため、見せたいものが画像の外側にあると、カットされてしまう可能性があります。もし好きな位置で調整したい場合は、画像ごとにCSSを追加することになるので、画像自体を加工する方が早いかもしれません。
元画像がかなり高解像度の写真やサイズが大きすぎると、見た目はトリミングしていても重たい画像を読み込んでいることは変わらないのでサイトの表示速度が遅くなります。

理想は、画像を加工できる環境、運用ができるのでしたら、画像をリサイズや圧縮して軽くしたり、きれいに見える位置で加工してトリミングする方が、見た目としても重さとしてもサイトにとっては良いと思います。
ただし、運用方法や状況によっては、難しい場合もありますので、そんなときに今回の記事が参考になりましたら幸いです。