CSSだけで画像をトリミングする

画像をトリミングする際にはPhotoshopなどの画像編集ソフトを使って作業することがありますが、CSSでも似たような感じでトリミングをすることができます。画像を一覧で見せるようなページで素材のサイズがバラバラだと、1つずつトリミングをしてサイズを合わせる必要がありますが、CSSを利用すればそのような作業をいちいち行う必要もありません。

positionプロパティを使ってトリミング

まずは、positionプロパティを使って画像をトリミングする方法です。

.imgTrim {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.imgTrim img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
}

画像を囲むボックスに対して、切り取りたい幅と高さを指定します。そして、「overflow: hidden;」ではみ出した部分を見えないようにします。img要素に対しては、高さに応じて横幅をトリミングするようにしています。これを「width: 100%;」「height: auto;」と逆に指定をすれば、横幅に応じて高さが切り取られます。

object-fitプロパティを使ってトリミング

ブラウザは限られますが、object-fitプロパティを使うことで画像をトリミングすることもできます。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

object-fitを使う場合は、img要素に対して「object-fit: cover;」を指定するだけでトリミングすることができます。あとは切り取りたいサイズを指定するだけでできちゃいます。 このような感じで画像編集ソフトを使用しなくてもCSSだけで簡単に画像をトリミングすることができますので、機会があれば試しに使ってみてください。