ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。
添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、
自動的にそれに合わせて画像も小さくなってもらいたのですができません。
どのようにhtml,cssを書いたらいいですか？
画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。
そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、
画像1,2,3は色々試してみたのですが変化がありません。
html↓
<body>
<article>
<div class="relative">
<img src="/../../画像4.gif" class="img-responsive" alt="" />
<img src="/../../画像1.gif" alt="" class="absolute" />
<img src="/../../画像2.gif" alt="" class="absolute2" />
<img src="/../../画像3.gif" alt="" class="absolute3" />
</div>
</article>
</body>
CSS↓
@charset "utf-8";
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 515px; left: 185px;
}
.absolute2 {
position: absolute;
top: 515px; left: 535px;
}
.absolute3 {
position: absolute;
top: 515px; left: 888px;
}
初めてhtmlを書いているので、変な質問をしていたらすみません。
お早めな回答をいただけると助かります。
よろしくお願いいたします。
お礼
回答ありがとうございました。 質問していて、自分で回答するのも不謹慎なのですが昨日風呂に入っているときに思いつきやってみましたらうまくいきました。 .pos1 {position:absolute; top:200px; left:550px; } #ctr { position: relative; margin-top: 0px; margin-right: auto; margin-bottom: auto; margin-left: auto; width: 780px; } <body> <div id="ctr"> ・ ・ </div> </body>