height以外で高さを指定する方法を教えてください

width:600px;くらいの画像

line-height:80px;で画像と同じできるんですけど、画面を収縮すると高さだけ固定されているので、縦長になってしますので、縦横が収縮するようにしたいです。　こんな感じで文字がこのBOXの中心に来るようにして、高さを指定しないで、８０pxくらいの高さを出すにはどうすればいいでしょうか？

　width:960px;くらいの画像
2枚目の画像がだいたいwidth:960;くらいでこれを収縮した時に上みたいにwidthだけ縮むのではなく、heightも比例して縮むようにしたいです。

説明下手くそですみません。。。。。

HTML
1        <section class="text-container-top">
2            <div class="text-box">
3                <div class="box-title1">Lava</div>
4                <div class="box-container">Lorem </div>
5            </div>
6            <div class="text-box">
7                <div class="box-title2">Vine</div>
8                <div class="box-container">Lorem </div>
9            </div>
10            <div class="text-box">
11                <div class="box-title3">Sky</div>
12                <div class="box-container">Lorem </div>
13            </div>
14        </section>

css
1
2.text-container-top{
3    width: 90%;
4    margin: 0 auto;
5    display: flex;
6    justify-content: center;
7}
8.text-box{
9    width: 30%;
10    padding: 0 20px;
11}
12.box-title1, .box-title2, .box-title3{
13    text-align: center;
14    display: flex;
15    flex-direction: column;
16    text-align: center;
17    font-size: 2rem;
18    font-family: 'Trebuchet MS';
19    line-height:80px;
20}
21.box-title1{
22    background-color: orangered;
23    color: rgb(0, 46, 133);
24}
25.box-title2{
26    background-color: rgb(0, 255, 136);
27    color: black;
28}
29.box-title3{
30    background-color: skyblue;
31    color: white;
32}

m.ts10806

2019/01/04 09:38

タイトルには要件のみを記載してください。要件がわからなくなるのでタグに利用できる内容を含ませる必要はありません。まだ、現在の状況が再現できるコードをマークダウンの機能を利用してご提示ください。

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

回答3件

レスポンシブにするには単位をpxで固定しないで「%」「vw」「vh」等を使用してみてください。

-追記-

デバイス幅960pxの時に「line-height:80px;」を基準にレスポンシブする場合、
「line-height = 80px ÷ 960px × 100％ = 8.33vw」で計算できますので、「line-height:8.33vw;」ではどうですか？試してみてください。

投稿2019/01/04 17:28

編集2019/01/07 01:46

yoshinavi

総合スコア3523

この回答で事足りるかな？
要素の縦横比をキープするCSSとかもいる感じですかね？

じゃあこうかな

css
1
2.box-title1, .box-title2, .box-title3{
3    text-align: center;
4    vertical-align: middle;
5    display: table-cell;
6    font-size: 2rem;
7    font-family: 'Trebuchet MS';
8    min-height: 60px;
9    max-height: 90px;
10    height: 9vw;
11}