スクロールに伴う画像の動き

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <link rel="stylesheet" href="default_2.css">
7  </he>
8  <body>
9    <div id="floating-menu">
10        <img src="画像" alt="画像について">
11    </div>
12     <p>
13      <img src="画像" alt="画像について">
14     </p>
15    <div>
16      <h1>星空</h1>
17      <p id="first">準備</p>
18      <p class="points">極寒</p>
19      <p class="points">綺麗</p>
20    </div>
21  </body>
22</html>

CSS
1p img {
2  max-width: 100%;
3}
4body {
5  margin-right: 0px;
6  margin-left:  0px;
7}
8div#floating-menu {
9    position: fixed;
10    top: 30px;
11    left: 0px;
12    right: 0px;
13    background-color: #FFFFFF;
14    border: 1px solid #000000;
15    z-index: 9999;
16}

HTML, cssの初心者です。
ウィンドウを動かしても画像が固定された状態を作ろとしています。

したいこと
1 画像の自動拡大縮小
2 画像の左右のmarginは0
3 画像の固定

CSSでは p img {}のみでしか画像の自動拡大縮小ができず、余計に画像を読み込んでいるので、実行した時に画像が重複して表示される状態です。
わざわざ，<dix>と<p>タグの両方に書く必要はないと思いますが、1つのタグにまとめる方法がわかりません。
CSSとHTMLで分けて書く必要はないのでしょうか。

kei344

2017/09/16 15:25

「スクロールと共に，画像が移動する方法」とは「ウィンドウの固定位置に画像がある状態」のことでしょうか。「うまく行かない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

oreo3

2017/09/16 15:36

ご指摘ありがとうございます．根本的なことを理解していませんでした．画像は固定位置にある状態のことです．問題を整理してから，修正しようと思います．

kei344

2017/09/16 16:05

「自動拡大縮小」とはどういう挙動でしょうか。提示されているコードでは縮小しかされません。

oreo3

2017/09/16 16:10

なるほど．「ウィンドウの大きさ，幅に合わせて画像の大きさも変化する」ようにしたいのですが．

行動規範の内容に同意します

回答1件

「ウィンドウの大きさ，幅に合わせて画像の大きさも変化する」ようにしたい

これだけなら下記でできます。ただ、画像を横幅基準で合わせると、場合によっては縦が長くなりすぎるなどがおこります。高さと幅を指定すると画像の縦横比が崩れてしまいます。最終的なデザイン次第では下記方法を採らないこともあります。

CSS
1div#floating-menu img {
2  width: 100%;
3}

p img は div#floating-menu に position: fixed; を指定したことによって h1要素がメニュー背景に隠れるのを防ぐために置かれているのでしょうか。

多くの固定メニューは高さを決めていることが多いので body要素の padding-top をメニューの高さ分にする等の処理をしますが、画像が可変の状態のままそれをするなら画像の縦横比から高さを算出する必要があります。

CSS
1body {
2  padding-top: calc(42.8571vw + 30px); /* 150 x 100 / 350 = 42.85714285714286... */
3  margin-top: 0;
4}
5```**動くサンプル：**[https://jsfiddle.net/q1jrgoxv/](https://jsfiddle.net/q1jrgoxv/)
6
7---
8
9【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】
10[http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html](http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html)
11
12【[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス】
13[http://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html](http://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html)