ズームイン/ズームアウトに関係なく、同じ場所に画像を保存する

Question

私は、自分のサイトにさまざまな場所に配置した画像をいくつも持っています。しかし、ページを拡大または縮小するたびに、彼らはどこにでも移動します！誰かが私を助けることができる？

これは、画像を配置するために使用しているコードの例です。私が個人的に見つけた唯一のコードは、私が好きな場所に画像を置くことができます。しかし、ズームするとまだ動きます！

<IMG STYLE="position:absolute; TOP:2820px; LEFT:150px; WIDTH:100px; HEIGHT:100px" SRC="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/abstract-red-and-gold-paint-splatter-icons-culture/022426-abstract-red-and-gold-paint-splatter-icon-culture-heart-simple.png"> 

Answer 1

問題は、相対位置を使用していないということです。物事を位置づけるのにpxを使うことに問題があります。

できるだけドキュメント内のすべてを配置するようにしてください。非常にまれに絶対測定で何かを配置しなければならない場合は、それはおそらく間違った方法です。

物を縦に整列させる方法は数多くありますが、これは決して最善の方法ではありません。私はあなたの質問が重複が見つかるずっと前に存続するとは思わない。いずれにしても、this exampleを参照してください。

<style> 
html, 
body, 
.parent { 
    height: 100%; 
    width: 100%; 
} 
.parent > .child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
</style> 
<div class="parent"> 
    <img class="child" src="https://placehold.it/150x150"> 
</div> 

将来的には、コードの詳細な例を示す必要があります。また、小文字でマークアップを書くべきです。大文字での推薦があれば、ごくわずかです。

あなたはそれを避けることができるところであなたのスタイルを書いてはいけません。また、<style>タグでもあなたのスタイルを簡単にグループ分けするだけです。