画像のレスポンシブについて

仕様

ヘッダー、メインビジュアル、
それぞれの背景が、ブラウザーの幅に応じて左右に引き伸ばされるようなデザインを行っています。
一方で各レイアウト要素に対しては幅を指定して、左右のmarginをautoにすることで、
サイト全体が中央に配置されるように見せています
レイアウトを構成する主要要素それぞれを個別にdivタグで囲って背景色を指定し、
divタグが常にブラウザー幅全体に表示されるよう設定しています　

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6
7<link href="css/common.css" rel="stylesheet" type="text/css">
8</head>
9<body>
10<div class="wrapper row1">
11	<header id="main_header">
12		<img src="images/logo.png" width="300" height="42" alt="">
13	</header>
14</div>
15<div class="wrapper row2">
16  	<p id="mainvisual">
17	 	<img src="images/縮小パソコン.png" width="950" height="400" alt="">
18	</p>
19</div>
20</body>
21</html>
22

css
1@charset "utf-8";
2/* CSS Document */
3/* wrapper関連
4**********************/
5
6/*ここではブラウザー幅全体に広がるようにwidthを100%にし、
7不要なmarginを取り除くプロパティのみ記述します*/
8.wrapper {
9    width: 100%;
10    margin: 0;
11}
12.row1 {
13	background-color: aqua;
14}
15.row2 {
16    background: #ECEFF1;
17    margin-bottom: 13px;
18    padding: 13px 0;
19}
20/* メインビジュアル
21**********************/
22/*レイアウトを構成する主要要素それぞれを個別にdivタグで囲って背景色を指定し、
23divタグが常にブラウザー幅全体に表示されるよう設定しています*/
24#mainvisual {
25    width: 960px;
26    margin: 0 auto;
27}
28#main_header {
29	width: 960px;
30	margin: 0 auto;
31}
32

ここに言語を入力

コード

実現したいこと

バックグラウンドカラーを残しつつ　imgをレスポンシブしたい

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

バックグラウンドカラーを残しつつ　imgをレスポンシブしたいでのですがimgを伸縮させるようにすると左右の
バックグラウンドカラーが消えてしまいます

該当のソースコード

css
1@charset "utf-8";
2/* CSS Document */
3/* wrapper関連
4**********************/
5/*レスポンシブ用に変更*/
6
7.wrapper {
8	margin: 0 auto;
9	max-width: 950px;
10}
11
12.row1 {
13	background-color: aqua;
14}
15.row2 {
16    background: #ECEFF1;
17    margin-bottom: 13px;
18    padding: 13px 0;
19}
20/* メインビジュアル
21**********************/
22/*レスポンシブ用に変更*/
23
24#mainvisual img {    
25    max-width: 100%;
26    height: auto;
27}
28#main_headeer img {
29    max-width: 100%;
30    height: auto;
31}

試したこと

上のcssを作りましたが左右のカラーが切れてしまいます

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

エディタはdwです　チェックはクロームでしています

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

回答1件

ベストアンサー

どういうことをしたいのか、正確に把握できていないかもしれませんが、
こちらでいかがでしょうか?

CSS
1#mainvisual {
2    width: 960px;
3    max-width: 100%; /* 場面幅をはみ出さないようにする */
4    margin: 0 auto;
5}
6#main_header {
7    width: 960px;
8    max-width: 100%; /* 場面幅をはみ出さないようにする */
9    margin: 0 auto;
10}
11
12img {
13  max-width: 100%; /* 親要素をはみ出さないようにする */
14  display: block;
15}

上記だと、画面幅960px以下のときに左右の余白がなくなるので、
左右の余白が欲しい場合は以下をためしてみてください。

CSS
1#mainvisual,
2#main_header {
3  max-width: calc(100% - 15px - 15px); /* 左右の余白が15pxの場合。数字は好きに調整してください。 */
4}

投稿2020/05/31 07:06

new1ro

総合スコア4528

kazumad

2020/05/31 07:24

img にheight:auto;を入れると完全に実現しました！本当にありがとうございます、一か月いろいろ試して悩んでいたので本当に助かりました。すごくうれしいです

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！