0

私の Web ページで、div を作成し、それに「img-responsive」クラスを追加しました。それは非常にうまく機能し、完全にスケーリングします。ただし、その上にボタンを追加する必要があり、これまで行った唯一の方法は、CSS プロパティ「position:absolute」を使用してその位置を定義することです。それは機能しますが、ブラウザーのサイズを変更すると、ボタンは Web ページに合わせて拡大縮小されず、小さな画面では非表示になります。どうすればこれを修正できますか?

これは、私のページのヘッダーがどのように見えるかのイメージです: http://postimg.org/image/xdols29nn/

これは私のdivがどのように見えるかです:

<div style="position:relative;" class="img-responsive" >
        <img src="images/mac2.png" width="1440" class="img-responsive" >
            <div>

                    <input style="position:absolute; left: 1130px; top:35px;"type="button" value="Button" href="#sidr" id="simple-menu">

            </div>

    </div>
4

1 に答える 1

0

これを試してみましたか（ボタンを作成してから画像の幅を100％にします）。これにより、ポジショニングを必要とせずに、コンテナの同じ幅で両方がレスポンシブになります。

<div class='row'>
    <button class='btn btn-default' style='width:100%;'>button</button>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" style='width:100%;height:auto;' />
</div>

間違った軌道に乗っている場合はお知らせください。

于 2014-02-22T00:04:10.537 に答える