元々の画像サイズ以上に拡大できない

目を通して頂いてありがとうございます。
トップの背景画像として使った画像（１０２４×４００）が、PC最大表示にした時に拡大出来ずに困っています。

「実現したいこと」
元々の縦横比を維持したままで拡大縮小、さらにレスポンシブデザインに適応したい
出来ましたら①Bootstrapを使うVer、②使わないverどちらも知りたいです。

「①試したこと→結果：元の画像縦横比はそのままに対応できたが、画像がそれ以上大きくならない」

HTML
1<!doctype html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <link rel="stylesheet" href="3-2-2.css">
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10
11    <title>test</title>
12<body>    
13<div class="header">
14<img src="333.jpg" class="img-fluid">
15</div>
16
17</body>
18</html>

「②試したこと→結果：元の画像縦横比はそのままに対応できたが、画像がそれ以上大きくならない」

CSS
1img {width:100%; /*100vwも試しましたが結果は同様*/
2　　　height: auto;}

HTML
1<header>
2<img src="333.jpg">
3</header>

ご教授頂けませんでしょうか？よろしくお願いいたします。

s8_chu

2018/11/16 07:46 編集

現象が再現できるコード(HTML, CSS JavaScriptなど)を、可能な限り省略せずに追記していただけませんか？また、質問者さんが使用している、Bootstrapのバージョンについても教えていただけますか？

x_x

2018/11/16 07:45

引用符やセミコロンの抜けがみられるので、コードをコピーするようにしてください

hellohello

2018/11/16 07:46

s8_chu 様　いつもお世話になっております。以前はありがとうございました。失礼致しました。すぐに修正致します。

hellohello

2018/11/16 07:49

x_x 様　失礼致しました。今すぐ訂正いたします！

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

回答1件

ベストアンサー

質問者さんが実現したいことは、「画面幅が画像幅を超えても、画像を画面幅にあわせて拡大、縮小したい」ということでしょうか？
もしそうであれば、以下のように出来ると思いますが、いかがでしょうか？
Bootstrap を使ったバージョン

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
7    <title>test</title>
8</head>
9<body>
10<div class="header">
11    <img src="http://placehold.jp/3d4070/ffffff/1024x400.png?text=image" class="img-fluid w-100">
12</div>
13</body>
14</html>

Bootstrap を使わないバージョン

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>test</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        img {
13            width: 100%;
14            height: auto;
15        }
16    </style>
17</head>
18<body>
19<div class="header">
20    <img src="http://placehold.jp/3d4070/ffffff/1024x400.png?text=image">
21</div>
22</body>
23</html>

投稿2018/11/16 08:14

編集2018/11/16 08:14

s8_chu

総合スコア14731

hellohello

2018/11/16 08:26 編集

s8_chu 様　はい、まさにその通りでございます…！ただいまどちらも試して見ましたが出来ました！！！なるほど、私はBootstrapではw−100が、使わない方では全体にかける　margin.paddingがなかったため再現出来なかったのですね。解決策だけでなく自身もしっかり原因が把握できました。この度は質問時に足りない部分があったり、うまく言語化できていない意図を汲み取って頂いたりこちらの不備にも関わらず、素早く解決してくださって本当にありがとうございました！！！！！！まだ始めたばかりのBootstrapで使いこなせていませんが頑張ります！

s8_chu

2018/11/16 08:31

> 私はBootstrapではw−100が、使わない方では全体にかける　margin.paddingがなかったため再現出来なかったのですね。 Bootstrap を使わないバージョンに関しては、質問者さんが質問文に記述している、「②試したこと」と同じことを、回答として投稿しただけです。そのため本来は、「②試したこと」のようにするだけで、質問者さんの実現したいことは行えるはずです。質問者さんの環境で「②試したこと」が正常に動作しなかった原因としては、以下の2つが考えられます。 - キャッシュ( https://saruwakakun.com/it/web/cache#section1 )の関係でうまくいかなかった。 - ケアレスミス(タイプミス、ファイルの保存し忘れ、など)によりうまくいかなかった。

hellohello

2018/11/16 08:41

キャッシュ初めて知りました！ケアレスミスかもしれませんね…先ほど他の方にもタイプミスをご指摘頂いているので、以後一層注意して確認致します。原因考察までして頂いて感謝感激でございますm( T T)m Bootstrapを練習初めて以前のCSSの書き方、レイアウトの仕方を忘れてしまいました.。便利すぎてHTML&CSS初心者の私には諸刃の剣かもしれません。s8_chu様のようになれるよう、一つ一つ理解して進みたいと思います。

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