さて、今回は【レスポンシブ対応！画像を上下左右中央に配置する方法】というテーマで進めていきたいと思います。
とりあえず例として画像サイズの異なるグルメ画像をMyサイトからランダムに取得してインスタ風に並べてみたものと、WordPressの記事一覧のように並べたものの2パターンを用意しました。
※1.リロードの度に画像は別のものが出力されます。
※2.写真はphoto ACさんから拝借しました。
写真をクリック、または取得すると元画像は縦横比率が異なるものという事がわかる。
今回の目標はこのように異なる画像のサイズを全て同じ比率に整え綺麗に並べるようにしていきたい。
DEMOとかいいからさっさと教えてくれって方は
こちらをクリック
インスタ風に並べてみる
先ずは画像を用意する
※最初にreset.cssは読み込んでおいてください
-
画像1のステータス
画像1の横幅：640
画像1の縦幅：427
画像1の縦横比率は 1:1.085
-
画像2のステータス
画像2の横幅：400
画像2の縦幅：182
画像2の縦横比率は 1:0.455
次に画像が入っていない画像をwrapするBOXを設置
コードはこうなってます↓
【 HTML 】
<div class="imgbox"></div>
【 css 】
.imgbox {
position: relative;
width: 35%;
max-width: 400px;
height: auto;
margin: auto;
background:rgba(255,200,200,.6);
}
.imgbox::before {
content: "";
display: block;
padding-top: 62.5%;
}
.imgbox img{
position: absolute;
width: 100%;
height: auto;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
実際に画像を入れてみる
↑を見て、
「比率全然変わってないやんけ！このヤロー！！！」
って方の為に視覚化してみると↓になる。
＼＼ 溢れている！！ ／／
極端に横長の場合
＼＼ 高さが足りない！！ ／／
１. とりあえず高さが足りていても足りていなくてもimgboxに
overflow: hidden;
をつけてオーバーしてる部分を隠す
２. それぞれ対応させるため、イメージ画像にclassをつける
高さが足りている場合はよこ基準なのでイメージ画像自体にclass「w_base」をつける
【 HTML 】
<div class="imgbox">
<img src="img1.png" class="w_base">
</div>
【 css 】
.imgbox {
position: relative;
width: 50%;
max-width: 400px;
height: auto;
overflow: hidden;
}
.imgbox::before {
content: "";
display: block;
padding-top: 62.5%;
}
.imgbox img.w_base {
position: absolute;
width: 100%;
height: auto;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
高さが足りていない場合は縦基準にしたい。
なのでイメージ画像自体にclass「h_base」をつける
【 HTML 】
<div class="imgbox">
<img src="img2.png" class="h_base">
</div>
【 css 】
.imgbox {
position: relative;
width: 50%;
max-width: 400px;
height: auto;
overflow: hidden;
}
.imgbox::before {
content: "";
display: block;
padding-top: 62.5%;
}
.imgbox img.h_base {
position: absolute;
width: auto;
height: 100%;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
実際に画像1と画像2を横に並べてみる
今回(↓)はテキストなど無いのでfloatで対応していますが、普段はテキストがあろうがなかろうが迷わず【flexbox】で作成してます。
旧ブラウザ(IEやAndroid4.3未満のバージョン等)の対応を特に考えていない方は率先して【flexbox】や【Grid Layout】で制作しましょう。
※なぜfloatより【flexbox】や【Grid Layout】を勧めるかというと、現行のブラウザでは単純にパフォーマンスがfloatより高い&レイアウトが崩れにくいからです。
特にfloat使用時は画像の高さが1pxでも変わったり、テキストの段落ちや改行の影響で一気にレイアウトが崩れたりしていたものが防げるようになります。
【 HTML 】
<ul class="clearfix">
<li>
<div class="imgbox">
<img src="img1.png" class="w_base">
</div>
</li>
<li>
<div class="imgbox">
<img src="img2.png" class="h_base">
</div>
</li>
</ul>
【 css 】
li{
float:left;
}
li:nth-child(2n+2){
margin-left:4%;
}
.imgbox {
position: relative;
width: 48%;
max-width: 400px;
height: auto;
overflow: hidden;
}
.imgbox::before {
content: "";
display: block;
padding-top: 62.5%;
}
.imgbox img.w_base {
position: absolute;
width: 100%;
height: auto;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
.imgbox img.h_base {
position: absolute;
width: auto;
height: 100%;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
いい感じに並びました