画像のリサイズについて

前提・実現したいこと

パソコン、タブレット、スマホ、どれで見ても画像がきちんと表示されるようにしたい。

発生している問題・エラーメッセージ

↓のテンプレートを利用して、ウェブサイトを作成中です。

リンク

↓を参考に数秒ごとに写真が切り替わるページを2つ作成しました。
リンク

画像が切り替わる設定はできたのですが、スマホで見ると1つのページは横長の写真が
画面の横幅サイズで切れて表示され、もう1つのページでは写真は表示されるものの、
横にスクロールが必要になってしまいました。

↓を参考に画面サイズに合わせて画像がリサイズされるcssを元々のテンプレートのcss
の下の方に追加してみたのですが、上記の症状は変わりませんでした。
リンク

エラーメッセージ
特にエラー表示はなく、パソコンで作った画面をスマホで見てみたら
ページによって画像の右端が切れているページと、画像な全て表示されて
いても、横のスクロールが必要なページがあることがわかりました。

なお、数秒ごとに切り替わる画像だけが、画像の右端が切れたり
横のスクロールが必要になっており、画像を貼っただけのページでは
右端が切れたり、横のスクロールが必要なページはありません。

該当のソースコード

HTML
1<div id="photo">
2<img src="gazou1.jpg" width="500" height="300" alt="">
3<img src="gazou2.jpg" width="500" height="300" alt="">
4<img src="gazou3.jpg" width="500" height="300" alt="">
5<img src="gazou4.jpg" width="500" height="300" alt="">
6</div>

で画像が切り替わるページの写真に

css
1img {
2    max-width: 100%;
3    height: auto;
4}

を適用させようと元々のテンプレートのcssに追加したが、
画像の右端が切れたり、横のスクロールが必要な症状は変わらなかった。

試したこと

画像のリサイズに関するcssをいろいろと試しました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hatena19

2019/11/30 19:40 編集

コードは、マークダウンのコードタグで囲んでください。コード部分を選択しておいて、ツールバーの <code> をクリックすると自動で囲んでくれます。また、実際のCSSコード、JavaScriptコードも質問に追記してください。リンクもマークダウンのリンクにしてください。

m.ts10806

2019/11/30 20:11

「きちんと」は個人の主観によるところが多い表現です。具体的に記載願います。

m.ts10806

2019/11/30 20:12

「いろいろ」は何も伝えない表現です。「試したこと」であればそのコードを提示することで伝わります「調べたと」であれば記事のURLや書籍内容を提示することで伝わります。

wally

2019/11/30 23:49

皆さま、コメントありがとうございました。初投稿だったので勝手がわからず、リンクがマークダウンになっていなかったり、<code>で囲んでいなかったり等、質問する立場でありながら不手際がありすみませんでした。 hatena19さまにご回答頂いた内容で解決しました。本当にありがとうございました。

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

回答1件

ベストアンサー

質問のリンク先のCSS

css
1#photo {
2    width: 500px;
3    height: 300px;
4    margin: 0 auto;
5    text-align: left;
6    overflow: hidden;
7    position: relative;
8}
9
10#photo img {
11    top: 0;
12    left: 0;
13    position: absolute;
14}

このコードの問題点は、外枠(#photo)の width と height を固定で指定しているところです。画面幅500px以下ですと画面からはみ出ます。

幅は max-width: 500px;と最大幅を指定して500px以下の場合は自動で縮小するようにします。
高さは指定せずに、内側の画像の高さになるようにします。

画像(img)はwidth: 100%;として外枠の幅に合わせます。高さはheight: auto;にして縦横比を維持します。

position: absolute;で画像を重ねてますが、そうするとフローから外れて外枠の高さが0になってしまいますので、最初の画像（:first-child）は除外して外枠の高さを確保します。

上記を考慮すると下記のようなCSSになります。

css
1#photo {
2  max-width: 500px;
3  margin: 0 auto;
4  text-align: left;
5  overflow: hidden;
6  position: relative;
7}
8#photo img {
9  width: 100%;
10  height: auto;
11}
12#photo img:not(:first-child) {
13  top: 0;
14  left: 0;
15  position: absolute;
16}

動作確認用サンプル

投稿2019/11/30 20:20

hatena19

総合スコア33715

wally

2019/11/30 23:47

hatena19さま、丁寧なご回答をありがとうございました。自動的に切り替わる画像を作るページに</head>タグの真上に入れると書かれているものがcssだということも判らずに作業していたので、本当に助かりました。教えて頂いた部分を修正したところスマホで見ても画像が画面のサイズで表示されるようになりました。感謝いたします。