• ベストアンサー

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

最近ヒーローイメージがちょうど画面ぴったりになっているサイトを見るのですが、 imgの画像をアスペクト比を保ちながらぴったりにするにはどのようにすればよいのでしょうか？ backgroundなら、coverがありますが、imgの場合はどうするのでしょうか？ フルイドイメージで横幅100%にはしていますが高さは指定するとアスペクト比がおかしくなりますよね？ 最後にアンドロイド4.4からついにvm,vhが使えるようになったので、%とももうおさらばしていいのかと思っているのですが、すでにWEBデザイナーの間ではメインに使っていますか？

  • CSS
  • 回答数1
  • ありがとう数1
回答 全件
ベストアンサー
ざっと書いてみました。CSS+Javascriptで実現しています。 …

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

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.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の中で使うとブラウザごとに挙動が違うのでその場合は注意しています。

参考URL：
http://caniuse.com/#search=calc
okweb12345
質問者

お礼

ありがとうございます。 https://codepen.io/anon/pen/WOzBpM こちらに再現しましたが、cssのcoverのように横幅は100%で、はみ出た分は画面外に行くのか、見れないようになり、画像の真ん中だけ表記されるようにすることはできないのですかね？ これだとアスペクト比は確かに確保できると思うのですが、隙間が空きませんか？ if(w/h>imgw/imgh) これはどちらが大きいかを確認して、大きい方を100%にしてもう片方はそれに合わせるようにしているのでしょうか？ ES6の書き方ですかいっぺんにかけるのですね。

okweb12345
質問者

補足

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

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 背景画像にコメントを載せて、タイトルとして表示する方法

    背景画像にコメントを載せて、タイトルとして表示する方法 http://chaichan.web.infoseek.co.jp/src/htmtable.htm ↑の基礎講座ページのような項目別のタイトルに文字入り画像を表示したいです。 項目別のタイトルというのは、 その基礎講座ページの「はじめに」「テーブルサンプル」「サンプルソース」などのタイトルのことです。 今自分が作っているページは項目別のタイトルの表示の仕方が、 色を付けた文字を太く大きくしただけのものなので見た目がさえません。 それで、基礎講座ページのようにできればなと思いました。 ・画像の中にコメントを入れられる ・PC画面の横幅に関係なく画像がちゃんと表示される http://allabout.co.jp/internet/hpcreate/closeup/CU20030623A/ ↑のページの通りにしましたが、何も変化がありません。 <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントA</b></font><br> 　　　　： 　　　　： <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントB</b></font><br> 　　　　： 　　　　： <body style="background-image: url('img.gif'); background-position: center center;background-repeat: no-repeat;"> <font size="6" color="#ff0099"><b>コメントC</b></font><br> 　　　　： 　　　　： と初心者なりにこんな感じでやったのですが、 どうすれば基礎講座ページのように表示することができますか？

    • ベストアンサー
    • HTML
  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？ ～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？ ～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • サイドバーの背景画像(CSS)

    以下のＣＳＳのソースなのですがサイドバーに http://www.01kaisha.com/img/main/main01_r2_c3.jpg を背景として使いたいのですがメインのほうに背景がいってしまい サイドバーで表示する事が出来ません。 どのようにすればサイドバーにhttp://www.01kaisha.com/img/main/main01_r2_c3.jpg を使用することが出来るのでしょうか？ どなたか分かる方いらっしゃいましたら教えてください、お願いします<(_ _)> body{ margin: 0px; padding: 0px; background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg); background-repeat: repeat-y; } .main{ width: 642px; position: absolute; left: 0px; } .side{ margin-left: 642px; }

    • ベストアンサー
    • HTML
  • 画像の表示方法について

    画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか？ つまりこういうことです。 <div id="photo"></div> css #photo { 　　　　background-image: url(image/photo01.gif); 　　　　background-repeat: no-repeat; 　　　　width: 240px; 　　　　height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo { 　　　　background-image: url(image/photo01.gif); 　　　　background-repeat: no-repeat; 　　　　text-indent: -9999px; ←これでテキストをかなたに飛ばす 　　　　width: 240px; 　　　　height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで背景画像の固定

    よろしくお願いいたします。 現在、WEBページを制作しておりまして CSSで背景画像を固定する方法で悩んでいます。 通常、背景画像を固定する際、 #contents { display:block; width:500px; height:500px; margin:0; background-image:url(img/hoge.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:bottom; } この様な感じで可能だと思うのですが、 今回やりたい事が出来ずに悩んでいます。 やりたい事が私の文章力では説明で伝わるか わかりませんので画像にしてみました。 図Aの様に「#contents」のブロック内の下段に固定に したいと思っているのですが、 実際上記の様なCSSの記述ですと図Bの様に ウィンドウの高さに対しての下段固定になってしまい ウィンドウを伸ばすと、「#foot」ブロックの後ろに 回ってしまい全体を表示してくれません。 どなたか、解決方法がおわかりになる方 ご教授願えますでしょうか。 また、過去同じ質問がありましたら、 お手数おかけいたしますがご誘導願えますでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

    背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • アスペクト比

    スタンダード1.33とアナモフィック1.33の違いについてお伺いしたいです。 テレビの4:3の画面(地上デジタル放送でサイドに黒い帯が入る)はアナモフィック1.33でしょうか？ 映画の4:3の画面はスタンダード1.33でしょうか? 違いが分からず当惑しています。 ご教示いただけると非常に助かります。

  • アスペクト比

    　10数年前のことですが、miniDVDで撮影するときに将来のことを考え、４：３ではなくワイド画面で記録しました。しかし、視聴の際は現主流のＴＶやソフトで色んなアスペクト比で調整しても実際より横長になり、人物等は太った状態になります。撮ったビデオカメラでは比率があって見ることができています。また私が試した中では唯一GomPlayerでアスペクト比を４：３とモニター出力にすると16：9で見ることができました。このデーターをいろんな編集ソフト（無料も有料も）で読み込み、ＤＶＤやＢＤに焼いてみました（４：３と16：９両方とも試してみました）が、どうしても横広がりになりなります。アスペクト比を変換するソフトとを使いますと画像が落ちてしまいます。といっても1時間3.8Ｇ程なので1時間の映像をＤＶＤに焼くなら問題ないと思うのですが、1時間で12Ｇ(AVIファイル）ほどのファイルを、画質がおちなくていろんなアスペクト比に対応しているソフトがあればご紹介下さい（ＢＤに焼くかＨＤに保存しようと思います）。有料なら体験版でうまくいけば購入したいと思いますので、よろしくお願いいたします。

  • アスペクト比？？

    ＡＶＩファイルをＤＶＤプレーヤー（ディーガ）で見るために書き込みしたのですが見てみると上部がカットされてました。 アスペクト比？は関係あるのでしょうか？ 1　窓録で470×370で録画（ＡＶＩファイル） 2　ＷＭＥでエンコード（新しいセッションウィザード＞ファイル変換＞ファイル保存＞＞） 3　DVD Flickで書き込み。 4　テレビで見ると上部がカット 470×370が原因でしょうか？　テレビは4：3？

  • アスペクト比について

    飯山電機ProLite B2409HDSのディスプレイを使用しています。 ダイレクトXで動く800×600（4:3）のゲームを起動すると、1980×1080（16:9）の比率で表示されてしまい、横長画面になってしまいます。 これを画面の両端に黒い帯を表示させるなりして4:3比率にすることはできないでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する