【Bootstrapレスポンシブ】画像の縮小に合わせ、画像の上に配置したボタンが同じ比率で縮小されるようにしたい

Question

###実現したいこと
画像(top_img.png)の上にリンクボタンボタンを配置しています。
画面サイズを変えると画像は縮小されるのですが、画像の上に配置したボタンの大きさが変わらず、レイアウトが崩れてしまいます。
添付画像のように画像と一緒にリンクボタンも同比率で縮小させるにはどのようにすればよろしいでしょうか。

基本的なことで恐縮ですがアドバイス頂きたくよろしくお願い致します。

###各種コード

<header class="masthead">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12 text-center img-table">
                <img src="{% static 'img/top_img.png' %}" class="top-pic" alt="">
                    <a href="{リンク先}" class="link−a">リンクA</a>
            </div>
        </div>
    </div>
</header>

.masthead {
    height: 80vh;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-talbe{
    position: relative;
}

.top-pic{
  width: 50%;
  height: 50%;  
}

.link-a{
    position: absolute;
    width: 20vw;
    top: 81.5%;
    left:50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    font-size: 25px;
    border: solid white 2px; 
    border-radius: 15px;
    padding: 7px;
    color: white;
    background-color: #f66e70;
    text-decoration: none;
}

必要最低限のコードを記載したつもりですが、不足点ありましたがご指摘いただけますと幸いです。

###バージョン
HTML5
Bootstrap 4.7.0
Python 3.6.3
Django 2.2.16

お手数ですがご確認のほどよろしくお願い致します。

Answer 1

こんにちは。

最小スクリーン幅を360pxと想定した時に、.link-aはwidth: 20vwなので、72pxです。
ここで、padding: 7px border: solid white 2px ですから、72-(7+2)*2 = 54px が文字表示に使える幅です。
全角のことも考えると、「リンクA」を表示するには8文字分確保する必要がありますから、54/8 = 6.75px がフォントサイズ、ということになります。
これをvwに戻すと、6.75/360 = 0.01875 ということで、font-size: 1.875vhとすればいいのではないかな、と思います。
これでは文字が小さすぎる、という場合は、パディングもvw単位に変更することを検討してみてもいいのではないかな、と思います。

また、フォントサイズは絶対に代えたくない、ということであれば、以下をお試しください。

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Comments

[minari766]

早速のご回答ありがとうございます！
font-sizeとpaddingの単位をvwにすることでリンクボタンがビューポートに合わせて大小するようになりました！

フロントエンドも奥が深いですね・・・
とても勉強になりました。

[Lhankor_Mhy]

すみません、1.875vh は 1.875vw でしたね。

ご解決されて何よりです。