- ベストアンサー
imgの画像をアスペクト比を保ちながらぴったりにす
最近ヒーローイメージがちょうど画面ぴったりになっているサイトを見るのですが、 imgの画像をアスペクト比を保ちながらぴったりにするにはどのようにすればよいのでしょうか？ backgroundなら、coverがありますが、imgの場合はどうするのでしょうか？ フルイドイメージで横幅100%にはしていますが高さは指定するとアスペクト比がおかしくなりますよね？ 最後にアンドロイド4.4からついにvm,vhが使えるようになったので、%とももうおさらばしていいのかと思っているのですが、すでにWEBデザイナーの間ではメインに使っていますか？
- okweb12345
- お礼率64% (227/350)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ざっと書いてみました。CSS+Javascriptで実現しています。 CSSで画像が画面の上下左右中央になるように指定しています。画面の縦横比をJavascriptで取得、画像のアスペクト比と比較したうえで高さと幅のどちらを100%にするかを決定します。 <html> <head> <style> html,body{ margin: 0; } .image{ width: 100%; height: 100%; position: relative; overflow: hidden; } .image img{ display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .image img.w100{ width: 100%; height: auto; } .image img.h100{ width: auto; height: 100%; } </style> <script> imgw = 960, imgh = 570; // 画像のアスペクト比（サイズ） function resizeimg(){ // ウィンドウサイズに応じて画像サイズを変更 w = window.innerWidth; h = window.innerHeight; if(w/h>imgw/imgh){ // 画面が画像より横長の時 document.getElementById("hero").className="w100"; }else{ // 画面が画像より縦長の時 document.getElementById("hero").className="h100"; } } document.addEventListener("DOMContentLoaded", resizeimg); // ページロード時の実行 queue = null; wait = 200; // リサイズイベントを過剰に発生させないための待ち時間 window.addEventListener("resize", function(){ // ウィンドウリサイズ時の実行 queue = setTimeout(function(){ resizeimg(); clearTimeout(queue); }, wait ); }); </script> </head> <body> <div class="image"> <img src="https://cdn.pixabay.com/photo/2016/11/16/10/59/mountains-1828596_960_720.jpg" id="hero"> </div> </body> </html> vwやvh、便利な単位ですよね。私はWEBデザイナーではないのでメインで使われているのかは分かりかねますが、calcの中で使うとブラウザごとに挙動が違うのでその場合は注意しています。
お礼
ありがとうございます。 https://codepen.io/anon/pen/WOzBpM こちらに再現しましたが、cssのcoverのように横幅は100%で、はみ出た分は画面外に行くのか、見れないようになり、画像の真ん中だけ表記されるようにすることはできないのですかね？ これだとアスペクト比は確かに確保できると思うのですが、隙間が空きませんか？ if(w/h>imgw/imgh) これはどちらが大きいかを確認して、大きい方を100%にしてもう片方はそれに合わせるようにしているのでしょうか？ ES6の書き方ですかいっぺんにかけるのですね。
補足
お返事を頂けないので別質問にします。