ウェブデザインに於いて、画像の挿入やその画像の加工（トリミング）は必須です。
そこで今回は初心者向けに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プロパティには５つの値を入れることが出来ます。
そして値にはそれぞれの特性があるので使用には注意が必要です。
✅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.
まとめ
いかがだったでしょうか。
まとめてソースコードを見ても中々難しいと思いますが、一つ一つを分解してコードを見るとよく理解できると思います。
今回の方法を試して、画像の挿入や加工をスムーズにできる様になりましょう。
