画面の高さと画像の高さの比率を保ったまま画像を表示するレスポンシブデザインの実装を改良したい

前提

現状、以下のように、画面の高さと画像の高さの比率を保ったまま、画像を表示するレスポンシブデザインになっています。

PC表示

モバイル表示

これを実現するために、現在は以下の実装になっています。

imgタグのdata属性に個々の画像の高さを設定する必要がある
javascriptでレスポンシブ対応をしている

実現したいこと

できれば以下の実装を改良し、レスポンシブ対応を実現したいと思っています。
どれか一つでも良いアイデアがありましたら、ご教授いただきたいです。

imgタグに設定しているdata属性をなくしたい
javascriptを使用せずに、cssだけにしたい
javascriptを使用しなければならない場合、8行目の1000を適切な値にしたい

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta>
5        <script src="script.js"></script>
6        <link rel="stylesheet" media="all" href="style.css" data-turbolinks-track="reload">
7    </head>
8    <body>
9        <div class="container">
10            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x150.png" data-height="150" alt="image" >
11            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x200.png" data-height="200" alt="image" >
12            <img class="test" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/150x300.png" data-height="300" alt="image" >
13        </div>
14    </body>
15</html>

css
1.container {
2   display: flex;
3   flex-wrap: nowrap;
4   overflow-x: scroll;
5   align-items: flex-end;
6 }
7 
8 img {
9   width: auto;
10   object-fit: contain;
11 }
12

javascript
1window.onresize = function() {
2    var windowHeight = window.innerHeight;
3    var elements = document.getElementsByClassName("test");
4    
5    console.log(windowHeight);
6    for(var i = 0; i < elements.length; i++){
7        // 暫定でとりあえず1000にしているが、ここも改善したい
8        var rate = windowHeight / 1000;
9        elements[i].style.height = elements[i].dataset.height * rate + "px";
10    }
11}

試したこと

cssにおいて、imgに対しheight: 100vh;を設定すると、画面高さいっぱいに各画像が表示されてしまいます

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

回答1件

ベストアンサー

いかがでしょうか。

HTML/CSS
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta>
6    <style>
7        .container {
8            display: flex;
9            flex-wrap: nowrap;
10            overflow-x: scroll;
11            align-items: flex-end;
12            height: 90vw;
13            max-height: 90vh;
14            width: 50%;
15            max-width: 1000px;
16        }
17
18        img {
19            width: auto;
20            min-width: 30%;
21
22        }
23
24        img.test1 {
25            height: 30%;
26        }
27
28        img.test2 {
29            height: 40%;
30        }
31
32        img.test3 {
33            height: 90%;
34        }
35    </style>
36</head>
37
38<body>
39    <div class="container">
40        <img class="test1" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x150.png" data-height="150"
41            alt="image">
42        <img class="test2" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/100x200.png" data-height="200"
43            alt="image">
44        <img class="test3" src="https://bookreviw-sample.s3.ap-northeast-1.amazonaws.com/150x300.png" data-height="300"
45            alt="image">
46    </div>
47</body>
48
49</html>