あとりえSoeruのつぶやきブログ
アンカーで作ったボタンを縦横比そのままに拡大縮小できるようにする方法
2018年9月5日
アンカーリンク<a>に背景画像を設定してボタンに見せかける手法がありますよね。
Webコーダーならよくやる手法です。
下記が今までの手法。
a{
display:block;
width:100px;
height:50px;
text-indent:-9999px;
overflow:hidden;
background:url(abc.gif) no-repeat left top;
}
でもスマホの普及によりリキッドデザインがデフォルトとなっている今、幅縦のサイズを固定してしまうと不便です。
そこで、縦横比そのまま拡大縮小できる方法があるんです。
まずbodyにwidthとheightを設定してください。
元の画像を幅100px×高50pxとします。
高÷幅×100を計算してください。そうすると50÷100×＝50になります。
そして、padding-topに単位を%にして設定します。
body{
width:100vw;
height:100%;
}
a{
display:block;
background:url(abc.gif) no-repeat left top;
overflow:hidden;
text-indent:100%;
white-space:nowrap
background-size:100%;
width:100%;
height:0;
padding-top:50%;
}
ちなみに、幅を100%じゃなくて小さくしたい場合はwidthとpadding-topの数字を変えるか
そのボタンを囲うブロックの幅を小さくすれば実現できます。
半分のサイズにしたい場合はwidthの100%×0.5=50%、padding-topの50%×0.5=25%を設定します。
width:50%;
padding-top:25%;
以上、参考にしてください。