html - ウィンドウのサイズを変更すると画像が移動する

Question

ウィンドウのサイズを変更するときに動かないように、自分のサイトの画像を取得しようと何度か試みましたが、うまくいきませんでした。

ウィンドウのサイズに関係なく、この画像をまったく同じ場所にとどめたいだけです。

「今週のヒーロー」というテキストの上に、一番上に欲しい画像「クランツ」です。ご覧のとおり、テキストは同じ場所に留まります。

ご提案や解決策がありましたら、喜んでお聞かせください。

jsfiddle.net/VDfN4

ありがとう！

Answer 1

現在のコードと何を達成しようとしているのかを正確に伝えるのは難しいですが、#kranz img の絶対位置が原因​​である可能性があります。position:relative を使用するか、Kranz div を position:relative である別の div にラップしてみてください。

Answer 2

配置にパーセンテージを使用しないでください。

#kranz img {
 position:absolute;
left:42%;
margin-left:-50px;
margin-top:-13%;
width:275px;
}

その左: 42% はコンテナーの幅 (またはウィンドウの幅) の 42% であり、margin-top はコンテナーの高さ (またはウィンドウの高さ) の 13% です... したがって、ウィンドウのサイズが変更され、コンテナーの測定値のサイズが変更される場合変化する。パーセンテージなどの相対測定ではなく、ピクセルまたはその他の絶対測定を使用します。