HTMLとCSSで画像の挿入とトリミング
HTMLとCSSで画像の挿入とトリミング

ウェブデザインに於いて、画像の挿入やその画像の加工(トリミング)は必須です。

そこで今回は初心者向けにHTMLで画像を挿入する方法とCSSでその画像をトリミングする方法を解説していきます。

HTMLで画像の挿入

HTMLで画像を挿入する方法は以下の通りです。

<img src=“パス/ファイル名” alt=“画像の説明”>

今回の場合は画像の名前を『cat.jpg』として、imgフォルダに格納しています。

なので、ファイルパスは『img/cat.jpg』となります。 

そしてaltは任意なのですが、今回は『猫の画像』としておきます。

画像の大きさ指定

画像の大きさを指定する為には、高さと横幅を指定することで可能となります。

CSSコーディングによる高さの指定

height: ○○○px;

CSSコーディングによる横幅の指定

width: ○○○px;

○○の部分には値が入ります。

See the Pen gOaaXNx by PakuPaku (@PakuPaku) on CodePen.

これで高さや横幅を指定することで、画像の大きさを指定することはできました。

しかし、結果的に画像の縦横比が崩れることとなってしまいました。

そこで次項の画像のトリミングを行い、この大きさで画像の調整を行なっていきます。

画像のトリミング

画像のトリミングにはCSSでobject-fitプロパティを使用します。

CSSコーディング例

object-fit: ○○○○;

object-fitプロパティには5つの値を入れることが出来ます。

そして値にはそれぞれの特性があるので使用には注意が必要です。

位置の基準を指定する値

✅fill・・・・・初期値。画像が要素内を満たすサイズになります。結果縦横比が変わる場合があるので注意。

✅contain・・・画像が縦横の大きい方のサイズに合わせて縦横比を維持しつつ、要素内を満たすサイズになります。

✅cover・・・・・画像の縦横比を維持しつつ、縦横の小さい方が要素に合うサイズになり、はみ出した部分はトリミングされます。

✅none・・・・・・画像は要素の幅や高さを無視し、そのまま表示します。

✅scale-down・・・画像は「none」または「contain」を指定した扱いになり、表示したい画像が要素よりも小さい場合「none」として表示します。

今回は要素内に縦横比を変えずに、画像を挿入したいので『cover』で指定することにしておきましょう。

See the Pen vYNKGZp by PakuPaku (@PakuPaku) on CodePen.

画像の位置調整

トリミングした画像の位置調整にはobject-positionプロパティを使用します。

CSSコーディング例

object-position: 横の位置 縦の位置;

位置の指定には%やpxを使用することが出来ます。

必要に応じて、画像の位置を微調整しましょう。

今回は丁度いい場所に被写体がいるので、調整はしません。

トリミングした画像の加工

今回は簡単な例を紹介しておきます。

画像の角を丸くして円形に変えるものです。

CSSコーディング例

border-radius: 50%;

See the Pen PoPzNJB by PakuPaku (@PakuPaku) on CodePen.

まとめ

いかがだったでしょうか。

まとめてソースコードを見ても中々難しいと思いますが、一つ一つを分解してコードを見るとよく理解できると思います。

今回の方法を試して、画像の挿入や加工をスムーズにできる様になりましょう。

CSSカテゴリの最新記事