画像の横幅を画面の大きさに合わせてはみ出さないようレスポンシブにしたい

回答率: 85.46%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.46%

トップ HTML5に関する質問

Q&A

解決済

1回答

418閲覧

画像の横幅を画面の大きさに合わせてはみ出さないようレスポンシブにしたい

総合スコア5

0グッド

0クリップ

投稿2021/07/02 05:52

0

0

###画像の横幅を画面の大きさに合わせてはみ出さないようレスポンシブにしたい

ただ画像の横幅を900pxで指定し、見切れないよう100％で指定したいだけなのに、できません。
そもそもの画像が大きすぎるんでしょうか？

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html</title>
	<link rel="stylesheet" href="file:///Macintosh%20HD/Users/aoiy/Documents/feature1.css" type="text/css">
</head>

<body>
	<div class="wrapper">
		<header id="mainvisual">
			<img src="photo/golden-hour2.jpg" width="1920" height="1080" alt="mainvisual1"/>
		</header>
	</div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

.wrapper {
	width: 1000px;
	margin: 0;
	background-color: #FFF;
	
}

#mainvisual {
	width: 900px;
	max-width: 100%;
	margin: 0 auto;	
}

img {
	max-width: 100%;
	display: block;
}

試したこと

widthをpxではなく、90％に変更したりしてみましたが、何も変わりませんでした。

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

回答1件

0

ベストアンサー

<percentage> max-width を包含ブロックの幅に対するパーセント値で定義します。

max-width - CSS: カスケーディングスタイルシート | MDN

とのことですから、max-width: 100%は親要素のwidth: 1000pxを参照して1000pxになるかと思います。

ですので、親要素にもmax-width: 100%としてみてはどうでしょうか。

投稿2021/07/02 07:23

総合スコア36158

2021/07/09 05:52

Lhankor_Mhy様ご回答ありがとうございました！問題なくサイズ変更できました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

関連した質問

トップ HTML5に関する質問

画像の横幅を画面の大きさに合わせてはみ出さないようレスポンシブにしたい