Q&A
前提
現状、以下のように、画面の高さと画像の高さの比率を保ったまま、画像を表示するレスポンシブデザインになっています。
- 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件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/04 00:26