html css 画像

Question

htmlで一枚のペラページを作っています。

元となる画像を一枚置いていて、その上にボタン画像を載せようと思うんですが上手く行きません。
どうしたらいいでしょうか。

<div id="main">
      <img src="backimg" id="test">
      <div id="childimg">
        <img src="button">
      </div>
    </div>
</div>

 #test{ margin:0 auto;
        display:block;}

上記を実装してimg src="button"の幅を50%にしても画面の幅を増やしてらbackimgをはみ出してしまいます。
どうしたらよろしいでしょうか。

Comments

[退会済みユーザー]

display:bock→blockじゃなくて？

[退会済みユーザー]

ミスです。すいません　編集します

[m.ts10806]

背景画像にはされないんでしょうか。

[退会済みユーザー]

background-image:url(xxxx);
background-repeat: no-repeat;
background-position:center center;
background-size:contain;
width:100%;
height:xxxx px;

上記でしましたがやはりディレプレイの大きさが変わったらボタンの大きさがおかしくなります。

Answer 1

解決できました。。。

メインとなるタグにmax-widthで幅を指定したら通りました。

ありがとうございます。

Answer 2

「ボタン」も「背景」も状態や関係性がわかるコード／スクリーンショットが提示されていないので勘ですが、背景画像の特定箇所にボタンが来るようにしたいのでしょうか。

【背景画像の比率を保ったまま、レスポンシブ対応する | たねっぱ！】
https://taneppa.net/responsive_background_image/

【CSS Tips ボックスの縦横比を維持したままレスポンシブ対応にしたい｜a-masuda｜note】
https://note.com/ikamasu/n/n06e3056498bb

Answer 3

あくまでも画像の上に画像を載せたいというところだけに着目して回答

参考になりそうなサイト

<div id="main">
    <div class="parent">
        <img src="">
        <img class="child" src="">
    </div>
</div>

.parent{
  position:relative; /*位置基準を親DIVに*/
  top:100px;
}

.child {
  position:absolute; /* 親DIVを元に位置を指定する */
  top:60px;  /* 親DIV上から60px */
  left:100px;  /* 親DIV左から100px */
}

こんな感じ？

---

Answer 4

ドット単位で複数画像の位置合わせをするならsvgがよいでしょう