要素の高さを可変にしたい(レスポンシブデザイン)

画面を小さくしていった時に画面幅に合わせて要素の高さも可変するようにしたいのですができません。。。
可変できるようにしたい要素は子要素です。想定だと画面の横幅が1400pxだった場合子要素の高さを560pxにし画面幅が小さくなった場合は子要素の高さも一緒に小さくしたいです。

HTML
1<section>
2  <div class="item_left"><img class="item_img" src="" alt="" style="height=560px"></div>
3  <div class="item_center">
4    <h2 class="item_title">この要素の高さを３００pxと想定(item_title)</h2>
5  </div>
6  <div class="item_right"><img class="item_img" src="" alt="" style="height=560px"></div>
7</section>

css
1section{
2height:100%;
3}
4.item_left{
5height:100%;
6}
7.item_center{
8????
9}
10.item_title{
11????
12}
13.item_right{
14height:100%;
15}
16

  <section>-------------------------------1400px---------------------------------|
  |.item_left-------------- .item_center---------------- .item_right-------------|
  |                       | |                          | |                       |
  |                       | |                          | |     height:560px      |
  |    height:560px       | |       height:300px       | |     width:500px       |
  |    width:500px        | |       width:400px        | |                       |
560px                     | |                          | |                       |
  |                       | |--------------------------| |                       |
  |                       |                              |                       |
  |                       |    ↑この.item_centerの高さを   |                       |
  |                       | 　　560pxにして尚且つ横幅の      |                       |
  |                       | サイズによって高さを可変にしたい   |                       |
  |------------------------------------------------------------------------------|

この場合画像の元々の高さが560pxなのでsection要素の高さも560pxになると思います。
そしてh2要素(.item_title)の高さは300pxとします。
その時.item_centerの高さも300pxになると思います。
この.item_centerの高さを560pxにして、尚且つ画面幅が1400pxから小さくなった時に560pxも小さくなるようにしたいです。
親要素である.item_center,子要素の.item_titleに直接560pxと指定しまうと可変になりませんし、かと言って高さ100%だと.item_titleの元々の高さ300pxしかありません。
もしわかる方がいたらご教示お願いします。。。

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

回答1件

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>test1</title>
6    <link rel="stylesheet" href="test1.css">
7    <style>
8        section {
9            width: 100%;
10            max-width: 1400px;
11            display: flex;
12
13        }
14        .item_left img{ width: 100%;}
15        .item_center {
16            background: #ff8989;
17            width:400px;
18            max-height: 300px;
19        }
20        .item_right img{ width: 100%;}
21    </style>
22</head>
23
24<body>
25
26    <section>
27        <div class="item_left"><img src="http://placehold.jp/500x560.png"></div>
28        <div class="item_center">
29            <h2 class="item_title">真ん中</h2>
30        </div>
31        <div class="item_right"><div class="item_left"><img src="http://placehold.jp/500x560.png"></div>
32</div>
33    </section>
34
35</body>
36
37</html>

↑補足確認いたしました。
ダミーで画像も入れてますので、確認してみてください。

投稿2020/04/21 18:12

編集2020/04/24 01:28

toremy

総合スコア52

hiroki88

2020/04/22 12:12

ご回答頂きましてありがとうございます。こちらですと左右の.item-imgの高さをmax-heightで560pxに指定しても.item_centerの高さは300pxから560pxにはならないと思うのですができるのでしょうか...?

hiroki88

2020/04/22 12:30

図を作ってみたので見ていただけると幸いです。

toremy

2020/04/23 06:16

回答、修正してみたので確認してみてください！３列のBOXで真ん中だけ可変するってことですよね？

hiroki88

2020/04/23 15:12

お手数おかけしてしまい申し訳ありません。 sessionの横幅が小さくなった時にsessionの縦幅も小さくなると思うのですがその時に子要素の左BOX(item_left), item_center, item_right(右BOX)全ての縦幅を可変したいです。 BOX(item_left), item_right(右BOX)は既に縦幅が560pxあるので親要素のsessionが小さくなれば一緒に小さくなるのですがitem_centerは高さが300pxしかないので親要素のsessionの縦幅が300px以下にならないと可変しないと思います。本当はitem_centerの縦幅を560pxにしつつ可変するようにしたいというわけです...

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

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

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

要素の高さを可変にしたい(レスポンシブデザイン)

関連した質問