こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

imgの画像をアスペクト比を保ちながらぴったりにす

最近ヒーローイメージがちょうど画面ぴったりになっているサイトを見るのですが、
imgの画像をアスペクト比を保ちながらぴったりにするにはどのようにすればよいのでしょうか?

backgroundなら、coverがありますが、imgの場合はどうするのでしょうか?

フルイドイメージで横幅100%にはしていますが高さは指定するとアスペクト比がおかしくなりますよね?


最後にアンドロイド4.4からついにvm,vhが使えるようになったので、%とももうおさらばしていいのかと思っているのですが、すでにWEBデザイナーの間ではメインに使っていますか?

投稿日時 - 2017-07-03 11:29:07

QNo.9347895

すぐに回答ほしいです

質問者が選んだベストアンサー

ざっと書いてみました。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の中で使うとブラウザごとに挙動が違うのでその場合は注意しています。

参考URL:http://caniuse.com/#search=calc

投稿日時 - 2017-07-03 12:39:02

補足

お返事を頂けないので別質問にします。

投稿日時 - 2017-07-06 12:43:19

お礼

ありがとうございます。

https://codepen.io/anon/pen/WOzBpM

こちらに再現しましたが、cssのcoverのように横幅は100%で、はみ出た分は画面外に行くのか、見れないようになり、画像の真ん中だけ表記されるようにすることはできないのですかね?

これだとアスペクト比は確かに確保できると思うのですが、隙間が空きませんか?



if(w/h>imgw/imgh)
これはどちらが大きいかを確認して、大きい方を100%にしてもう片方はそれに合わせるようにしているのでしょうか?
ES6の書き方ですかいっぺんにかけるのですね。

投稿日時 - 2017-07-03 14:34:06

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問