イメージはすべてのデバイスで応答する必要があります。 私が最初にトップ画像上
<img src="images/enter/red20.png" class=" img-responsive"
style="max-width:15%;position: absolute; right: 30%;"/>
<img src="images/enter/computer.png" class=" img-responsive" />
を使用しますがときに、他の場所でのサイズまたはブラウザのトップの画像の動きを変えています。上のリンクのデザインを参照してください。
キーを組み合わせてパーセンテージを使用することです最大幅：
大きな画像では、最大幅：100％を与えるため、サイズ自体は大きくなることはありませんが、親として大きくなることはありません。
親のdivにその画像をラップします。このdivはdisplay：inline-blockになるので、コンテンツの幅と同じになります。このdivを相対的に配置します。
次に、小さな画像をdiv内に追加して絶対配置します。その位置は親（div）に相対的であり、身体ではありません。最大幅に25％（たとえば）を与え、％で上下左右の位置を指定します。
HTML：
<div class="wrapper">
<img class="big-img" src="big.png" />
<img class="small-img" src="big.png" />
</div>
はCSS：
.wrapper{
display: inline-block;
position:relative;
}
.big-img{
width: 100%;
max-width: 100%;
border: 1px solid blue;
}
.small-img{
border: 1px solid red;
position:absolute;
right: 10%;
top: 10%;
width: 25%;
max-width:25%;
}
結果ウィンドウを小さくしてください、あなたは画像をリサイズし表示されます。
モバイルでも動作します。親の幅の最大100％しか使用しないためです... – LinkinTED
ありがとうございました。 :)本当に私が欲しいもの。 –
ラッパーposition-relative;
.wrapper{
position-relative;
}
.big-img{
width:300px;
}
.small-img{
position:absolute;
top:50px;
left:172px;
max-width:70px;
border:2px solid red;
}
これは応答しません。ブラウザのウィンドウのサイズを変更すると、最初の画像が別の場所に移動します。 –
@SohaibRiaz max-width：100％; .big-imgに入れてください – user2517200
モバイル用：172px;デスクトップが残っている方が良いでしょう。それを反応させるのに十分ではありません。私はdivの中心にこれらの画像を配置したい。そうすれば、デバイスの変更されたイメージの位置も変更されます。私はこれらの画像をすべての解像度の中心にしたいです。 –
を作るこの
<div class="wrapper">
<img class="big-img" src="http://i.stack.imgur.com/DATNq.png" />
<img class="small-img" src="http://i.stack.imgur.com/DATNq.png" />
</div>
CSSを試すには、次の2枚の画像を合成する画像編集ソフトを使用して検討していますか？これは、位置決めに関連する多くの問題を解決します。さまざまなサイズの画像を拡大/縮小し、異なるページレイアウトに合わせて使用することができます。
はい私もその1つを試みた：D –
それでは、その解決策の問題は何ですか？ – Barzev
可能であれば、最初のイメージを相対divのバックグラウンドに置くことができます。そしてdivの絶対的なイメージとして2番目。 おかげ
ショーコードまたはjsfiddle –
は、私は今の –
可能な重複コードを参照してください編集した[どのように私は、HTML内の別の上に一枚の画像を配置しますか？]（http://stackoverflow.com/questions/48474/how-do -i-position-one-image-on-another-in-html） – Roy