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

画面を小さくしていった時に画面幅に合わせて要素の高さも可変するようにしたいのですができません。。。
可変できるようにしたい要素は子要素です。想定だと画面の横幅が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にしつつ可変するようにしたいというわけです...

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