レスポンスに合わせて画像の高さを変更したいです。

前提・実現したいこと

コーディング初心者です。
レスポンシブル対応で画像の高さを最小で300pxのサイズにしたいです。

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

スタイルを指定しても画像サイズが変わらない。

@media screen and (min-width: 560px) {
.bg {
  width: 40%;
  height: 40%;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  z-index: 100;
}

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>test</title>
6</head>
7
8<body>
9<header class="header">
10  <nav>
11    <ul class="menu">
12      <li><a href="">NAVI</a></li>
13      <li><a href="">NAVI</a>
14        <ul>
15          <li><a href="">NAVI2</a></li>
16          <li><a href="">NAVI2</a></li>
17          <li><a href="">NAVI2</a></li>
18          <li><a href="">NAVI2</a></li>
19          <li><a href="">NAVI2</a></li>
20          <li><a href="">NAVI2</a></li>
21        </ul>
22      </li>
23      <li><a href="index.html">NAVI</a></li>
24    </ul>
25  </nav>
26</header>
27<section class="kv">
28  <div class="bg">
29    <div class="text-block text-white">
30      <p class="text">Sample text<br>
31        noname site</p>
32    </div>
33  </div>
34  <div class="text-block text-black">
35    <div class="text-inner">
36      <p class="text" aria-hidden="true">Sample text<br>
37        noname site</p>
38    </div>
39  </div>
40</section>
41</body>
42</html>

CSS
1.header {
2  display: flow-root;
3}
4.menu {
5  margin-bottom: 30px;
6}
7.menu li {
8  position: relative;
9  float: right;
10  z-index: 1000;
11  list-style: none;
12}
13.menu li a {
14  display: block;
15  text-decoration: none;
16  color: #333;
17  width: 120px;
18  padding: 10px;
19}
20.menu li a:hover {
21  color: #e8002a;
22}
23.menu li:hover > ul {
24  display: block;
25  background-color: #fff;
26}
27.menu ul {
28  display: none;
29  position: absolute;
30  top: 40px;
31  width: 140px;
32}
33.kv {
34  height: 100vh;
35  position: relative;
36}
37.bg {
38  height: 100%;
39  background: url("../Downloads/assets/PAK86_komorebitohizashi.jpg") no-repeat center/cover;
40  z-index: 100;
41}
42.text-block {
43  width: 100%;
44  position: absolute;
45  bottom: 100px;
46  left: 50%;
47  transform: translateX(-50%);
48}
49.text-black {
50  display: none;
51}
52.text {
53  font-size: 4.0rem;
54  font-weight: 600;
55  text-align: center;
56  letter-spacing: .02em;
57}
58.text-white .text {
59  color: #fff;
60}
61.text-black .text {
62  color: #000;
63}
64
65@media screen and (min-width: 560px) {
66.bg {
67  width: 40%;
68  height: 40%;
69  position: relative;
70  overflow: hidden;
71  margin-left: auto;
72  z-index: 100;
73}
74.text-black {
75  display: block;
76}
77.text-inner {
78  width: 50%;
79  overflow: hidden;
80}
81.text {
82  font-size: 40px;
83}
84.text-black .text {
85  width: 200%;
86}
87}
88
89@media screen and (min-width: 960px) {
90.bg {
91  width: 80%;
92  height: 80%;
93  position: relative;
94  overflow: hidden;
95  margin-left: auto;
96  z-index: 100;
97}
98.text-block {
99  transform: none;
100}
101.text-white {
102  bottom: 12.5%;
103  left: -12.5%;
104}
105.text-black {
106  width: auto;
107  bottom: 30%;
108  left: 10%;
109}
110.text-inner {
111  width: 100%;
112  margin-top: 200px;
113}
114.text {
115  font-size: 54px;
116  text-align: left;
117  letter-spacing: .1em;
118}
119.text-black .text {
120  width: 100%;
121}
122}

試したこと

@media screen and (min-width: 560px)のheightの数字を変更して確認してましたが、スタイルがあたりません。

下記太文字のコードを追記したところ全体的に画像が縮小したため、画像の上に余白が出てしまい、タイトルも画像の下に表示されてしまいました。
.bg {
height: 100%;
background: url("../Downloads/assets/PAK86_komorebitohizashi.jpg") no-repeat center/cover;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 100;

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

AdobeのDreamWeber v21.1を使用しています。

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

回答1件

画像の高さを最小で300px

min-height をお試しください。
min-height - CSS: カスケーディングスタイルシート | MDN

投稿2021/09/30 07:48

Lhankor_Mhy

総合スコア36158

jam27

2021/09/30 07:56

min-heightを置きましたが、変化はありませんでした。 @media screen and (min-width: 560px) { .bg { min-height: 300px; position: relative; overflow: hidden; margin-left: auto; z-index: 100; }

Lhankor_Mhy

2021/10/01 01:28 編集

メディアクエリの中に書いているからでは？スクリーン幅が 560px 以下のときには効かないですよ。

jam27

2021/10/01 01:08

@mediaではない.kvまたは.bgにも同様にmin-height: 300px;を入れてみましたが変化はありませんでした。どのようなコードで問題が解決したのか教えていただきたいです。よろしくお願いいたします。

Lhankor_Mhy

2021/10/01 01:28

.bg { min-height: 300px; } です。ちなみに、どのようにして .bg が 300px未満になっていることを確認しているのか、教えていただけますか？

jam27

2021/10/01 01:37

Google chromeの検証機能で確認をしています。 .bg { min-height: 300px; background: url("../Downloads/assets/PAK86_komorebitohizashi.jpg") no-repeat center/cover; z-index: 100; 上記を試しましたが、画像の高さに変化はありませんでした。

Lhankor_Mhy

2021/10/01 01:43

なるほど。問題が発生する状況でのスクリーンサイズと、背景画像のサイズを教えていただけますか？

jam27

2021/10/01 01:57

スクリーンサイズ横幅960px、画像横幅771pxより小さくしようとした時です。

Lhankor_Mhy

2021/10/01 02:12

画像の縦幅も教えてください。

Lhankor_Mhy

2021/10/01 02:13

上手く伝わっていないような気がしました。画像のサイズはオリジナルのサイズをお伺いしています。