ページ移動時に移動しない画像を修正する方法

Question

私は個人的なポートフォリオのWebサイトで作業していて、画面が移動しても画像を移動できません。

申し訳ありませんが、私は画像が中央にあり、ページが小さくなると画像が比例してサイズ変更されるようにしています。 （私はフレックスボックスでこれをやったと思ったが、答えが見つからなかった）

<div class="photopage"> 
    <img src="images/titlepage.png"> 
</div> 

これは正しいHtmlですか？または私はちょうどイメージを持っているべきですか？

現時点では、私のCSSはimvを10vw以上に設定しています。画面が動いたときに、すべてが中央に位置し、均等になるようにするには、これが道のりではないことが分かります。

など

Answer 1

あなたはちょうどそれが親の幅に比べて拡大されるように、画像に相対的な幅のいくつかの並べ替えを与えたい

、画面幅（vw）に画像を取得する最も簡単な方法コンテナのスケールはmax-width: 100%;を使用するだけです。親のサイズが変更されると、画像は親の幅を基準にしてその内部でサイズが変更されます。ここで

img { 
 
    max-width: 100%; 
 
}

<div class="photopage"> 
 
    <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg"> 
 
</div>

は、ビューポートの幅で画像を拡大縮小する方法の例です。

img { 
 
    width: 50vw; 
 
}

<div class="photopage"> 
 
    <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg"> 
 
</div>

Answer 2

あなたがやりたいこと、このですか？

[HTML]

<p> 
    this is a paragraph 
</p> 

<br><br><br><br><br><br><br><br><br><br><br><br> 

<p> 
this is a paragraph 
</p> 

<br><br><br><br><br><br><br><br><br><br><br><br> 

<p> 
this is a paragraph 
</p> 

<br><br><br><br><br><br><br><br><br><br><br><br> 

<p> 
this is a paragraph 
</p> 

<br><br><br><br><br><br><br><br><br><br><br><br> 

[CSS]

html { 
background-image: url(https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg); 
background-attachment: fixed; 
} 

p { 
    color: #fff; 
} 

https://jsfiddle.net/hass/p3dk2t6k/