HTML　CSSで画像のリサイズが適用されない事象について

前提・実現したいこと

知人のホームページを作成しておりますが
整形したロゴを貼り付けた際に画像のリサイズがされず苦慮しております。

具体的には作成したHTMLをフルスクリーンで表示させた場合は問題なく動作するのですが
画像を縮小させた際にBodyやfooter部分の幅と比較してheaderに挿入しているロゴが
はみ出してしまい、結果として想定しない余白が生まれてしまっております。
※文章では説明しづらい為に画像を用意いたしました。

目的としてはウインドウを縮小させた時でもロゴがはみ出さず余白が生まれないようにしたいと考えています。
1週間解決の糸口が掴めない為に投稿させて頂きました。お手数ですが何かアドバイスを頂けますと助かります。

問題の画像

###ソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>タイトル</title>
6  <link href="test_style.css" rel="stylesheet">
7</head>
8
9<body id="price">
10  <header>
11    <div class="logo">
12      <a href="index.html"><img src="images/logo.png" alt="ロゴ部分"></a>
13    </div>
14  </header>
15  <div id="wrap">
16    <div class="content">
17      <div class="main-content">
18        <h1>タイトル</h1>
19        <p>コンテンツ部分</p>
20        <p>コンテンツ部分</p>
21        <p>コンテンツ部分</p>
22        <p>コンテンツ部分</p>
23        <p>コンテンツ部分</p>
24        <p>コンテンツ部分</p>
25      </div>
26    </div>
27  </div>
28  <footer>
29    フッターを記載<br>
30  </footer>
31</body>
32</html>

CSS
1@charset "utf-8";
2
3body {
4  width: 100%;
5  margin: 0;
6  padding: 0;
7  color: #333333;
8  font-size: 15px;
9  line-height: 2;
10}
11
12header {
13  width: 100%;
14  height: 100px;
15  margin: 0 auto;
16}
17
18.logo {
19  float: left;
20  margin-top: 50px;
21  margin-left: 5%;
22  width: 70%;
23  height: auto;
24}
25#wrap {
26  width: 100%;
27  clear: both;
28  background-color: #eaee1d98;
29  margin-top: 220px;
30  padding: 35px 0;
31}
32
33footer {
34  width: 100%;
35  text-align: center;
36  color: #ffffff;
37  padding: 20px 0;
38  background-color: #767671;
39}
40
41footer small {
42  font-size: 12px;
43}

試したこと

・ブラウザをEdge、Chromeで試すも事象は変わらず
・CSSの「.logo」内に記載しているwidthの値を1～1000の間で変更するサイズが変更されていない
・floatプロパティの削除するも変わらず
・HTML側のロゴを削除すると正常に表示される

補足情報

Windows 10
ロゴの画像（幅：650px 高さ：92px）

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

回答4件

ベストアンサー

css
1.logo img {
2  max-width: 100%;
3}

とかしておけばはみ出すことはなくなるかと思います。

投稿2021/02/04 00:57

dit.

総合スコア3235

kawatan

2021/02/05 13:45

お返事遅くなり申し訳ございません。また迅速なご回答ありがとうございました。具体的なソースコードのご提示ありがとうございました。子要素のimgに対して指定が有効で無かったのですね。参考書を見ながらセレクタの親子関係について学習したつもりでしたが見て理解していた程度で収まり、自分で使う際に基礎的な考え方が身についおりませんでした。頂きましたソースコードを適用して無事解決致しました。また、他の私の記述のソースコードに最も近かった為にベストアンサーとさせて頂きます。

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

If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.

10.3.2 Inline, replaced elements | Visual formatting model details

勝手訳：heightとwidthの計算値がともにauto、かつ置換要素に固有サイズ幅がある場合、その固有サイズ幅がwidthの使用値になります。

とのこと。
つまり、heightとwidthに何も指定しない場合、画像のサイズで表示される、ということです。

ちなみに、どちらかに指定した場合、アスペクト比を維持してサイズが変更されます。

さらに蛇足ですが、固有サイズ幅を持たない置換要素の場合は、300pxになります。

参考：
要素固有のサイズ | CSS によるサイズ設定 - ウェブ開発を学ぶ | MDN
Intrinsic size (内在サイズ) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

投稿2021/02/04 05:28