ウェブサイトを制作している時、フリー画像サイトなどで画像を使いたい場合、サイズや縦横比がバラバラで困ったこと、ありませんか?

image2

今回は、画像のサイズを均等にして、適切な位置に修正する方法を紹介します。

基本のコードは、以下になります。

<div class="container">
  <div class="image-1">
    <img src="/images/image-1.jpg" alt="" />
  </div>
  <div class="image-2">
    <img src="/images/image-2.jpg" alt="" />
  </div>
  <div class="image-3">
    <img src="/images/image-3.jpg" alt="" />
  </div>
</div>
.container {
  display: flex;
}

img {
  width: 100%;
  display: block;
}

画像素材サイトから画像をダウンロードします。

※画像素材サイトは、pixabay(https://pixabay.com/ja/)を利用しました。

image3

それぞれサイズがバラバラです。

ブラウザに表示してみると、

image4

やはりバラバラです。

これらの画像を均等にするには、一つは画像加工ソフトでトリミングする方法があります。

もう一つは、 CSS 内で調整します。

まずは、画像のサイズを合わせるために、画像の横幅と高さを決めます。

例えば、画像の横幅を 360px、高さを 270px としてみましょう。

img {
  display: block;
  width: 360px;
  height: 270px;
}

ブラウザで確認すると、

image5

画像のサイズは揃いましたが、縦長や横長になっている画像があります。

画像の縦長や横長を調整する

これらの画像を修正するには、object-fit: cover;を設定します。

img {
  display: block;
  width: 360px;
  height: 270px;
  object-fit: cover;
}

ブラウザで確認すると、

image6

それぞれの画像の縦横比が合いました。

画像の位置を調整する

画像の位置を調整するには、object-position: ◯ □;で位置を指定します。

◯ には横の位置、□ には縦の位置を指定します。

例えば、1 番目の画像を調整してみます。

.image-1 img {
  object-position: 100% 0;
}

ブラウザで確認すると、

image7

1 番目の画像の位置が横方向に移動しました。

では、3 番目の画像を縦方向に調整してみましょう。

.image-3 img {
  object-position: 0 54%;
}

ブラウザで確認すると、

image8

3 番目の画像の位置が縦方向に移動しました。

簡単にトリミングができるので、ぜひ試してみてください。

ブログ一覧