今回は、複数の画像を均等幅で横並びにする方法をご紹介します。
画像でもブロック要素でも、横並びにするときは「flex」を使いますね。
画像を並べたはいいが、画像が原寸で表示され、ブラウザからはみ出てしまうケースがあります。
このときの対処法を見ていきましょう。
画像のwidthを％で設定する
画像を２枚並べるのであれば、
img{
width:50%;
}
とすると、２枚の画像は同じ幅となります。
さらに３枚の場合は
width:30%;
にすると、３枚は同じ幅でちょうどよく並びます。
「％」の値はお好みで変えましょう。
もちろんデザインカンプで指定された値があるのでしたら、それにお合わせた幅に変えましょう。
この「％」は、親要素に対しての割合ですので気をつけましょう。
余白は
justify-content: space-around;
justify-content: space-between;
などで自動調整しましょう。
「％」で幅を指定すればブラウザを拡大/縮小させても自動で幅を可変させてくれます。
とっても簡単ですよね。
是非お試しください。
画像関連の記事も紹介しておきます。