ブラウザウィンドウに収まるように画像のサイズを変更するにはどうすればよいですか？

114

これはささいなことのように見えますが、結局のところ、調査とコーディングを行っても機能しません。条件は次のとおりです。

  1. ブラウザのウィンドウサイズは不明です。したがって、絶対的なピクセルサイズを含むソリューションを提案しないでください。
  2. 画像の元の寸法は不明であり、ブラウザのウィンドウに適合しない場合があります。
  3. 画像は垂直方向と水平方向の中央に配置されます。
  4. 画像の比率を維持する必要があります。
  5. 画像はウィンドウ内に完全に表示される必要があります（トリミングしないでください）。
  6. スクロールバーを表示したくない（画像が収まる場合は表示しない）。
  7. ウィンドウのサイズが変更されると、画像は自動的にサイズ変更され、元のサイズより大きくなることなく、利用可能なすべてのスペースを占有します。

基本的に私が欲しいのはこれです：

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上記のコードの問題は、機能しないことです。垂直スクロールバーを追加することで、必要な垂直スペースをすべて取ります。

私が自由に使えるのはPHP、Javascript、JQueryですが、CSSのみのソリューションでは殺してしまいます。IEで動かなくてもかまいません。

html  css 
— Sebnukem
ソース
perraultarchitecte.com/en/projects/…これはあなたが望む効果ですよね？私も！
1
はい、そうです。私が解決策を上に投稿した作品。結果はeseb.net/potos.php?f=best_of/fort_collins_winter.jpgで
— sebnukem
ありがとう、それは本当に私を助けます。サイズ変更機能を維持したまま、2つの画像を並べて配置するにはどうすればよいですか？ありがとうございました。
8
私はあなたの「非要件」が好きです：「IEで動作しなくてもかまいません。」:)
— Bastian

回答:

122

2018-04-11の更新

これは、JavaScriptを使用しない、CSSのみのソリューションです。画像は動的に中央に配置され、ウィンドウに合わせてサイズ変更されます。

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

[その他、古い]ソリューションは、JQueryを使用して、画像bodyのmax-heightプロパティが期待どおりに機能するように、画像コンテナの高さを設定します（以下の例）。クライアントウィンドウのサイズが変更されると、画像も自動的にサイズ変更されます。

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit { /* set relative picture size */
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html>

注：ユーザーgutierrezalexは、このページのJQueryプラグインと非常によく似たソリューションをパッケージ化しました。

— Sebnukem
ソース
6
JSは必要ありません。CSSのみのソリューションがあります。
— Neolisk 2016
また、JSなしで、代わりにflexboxを使用
— Jason Sturges
51

これはシンプルなCSSのみのソリューション（JSFiddle）で、どこでも機能し、モバイルとIEが含まれています

CSS 2.0：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML：

<body>
  <img src="images/your-image.png" />
</body>
— ネオリスク
ソース
2
いいね。しかし、垂直方向に中央揃えされていません。
— sebnukem
1
@sebnukem：それはそうであるはずでしたか？どういうわけか私は要件でこれを逃しました。それが人々がスクリーンショット/モックアップを使用する理由です。:) PS私は、JSの助けがあっても、提供された答えのいずれもそれを垂直方向に中央揃えにすることはないと思います。
— Neolisk、2016
3
私はcss-tricksからのソリューションでさえ、多くのソリューションを試しました。あなたはちょうど魅力のように完璧に動作します！
— ステファン
2
史上最高のソリューション！
— iVela 2018
24

CSS3は、ビューポート（この場合はウィンドウ）を基準にして測定される新しい単位を導入します。これらはvhおよびvwであり、それぞれビューポートの高さと幅を測定します。次に、CSSのみの簡単なソリューションを示します。

img {
    max-width: 100%;
    max-height: 100vh;
    height: auto;
}

これに関する1つの注意点は、ページの高さに寄与する他の要素がない場合にのみ機能することです。

— マックス
ソース
ありがとうございます。100vh画像をフィットさせないが97vhうまくいく理由は何ですか？
— Pavel
おそらく、身体のマージンやパディングなど、高さに寄与する他の画像がありますか？vh文字通りビューの高さを意味するので、他の要素がページに高さを追加する場合、ページ全体は> 100vhになります。それは理にかなっていますか？
— 最大
ありがとう、解決しました。誰かが同じ問題を抱えている場合（.svgファイルは適切にレンダリングされますが、名前を変更する.htmlと不正確になります）：ファイルにタグがない場合でも、ブラウザ<body>はデフォルトmargin:8でタグを自動的に追加します<body>。したがって、ソリューションが追加されます<style>body{margin:0}</style>
— Pavel
15

画像の周囲にコンテナー要素を配置する場合は、純粋なCSSソリューションが簡単です。ご覧のとおり、親要素が垂直方向に伸びて子を含む場合、99％の高さは意味がありません。親は、たとえばビューポートの高さを固定する必要があります。

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
    <img class='make-it-fit' 
         src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}

img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}

バイオリンで遊ぶ。

— マークE.ハース
ソース
これをの<div>代わりにで行うことはできます<img>か？
— StevoHN、2015年
@sebnukem以前はその要件に気づかなかった。回答を更新しました。
— Mark E. Haase 2016
これは私の広い画像の高さを最大化しません。
— Sridhar Sarnobat
4

画像を縦横比を維持して最も長い辺で画面に合わせてサイズ変更

img[src$="#fit"] {
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: 100vh;
    object-fit: contain;
}

  • width: 100vw -画像の幅はビューポートの100％になります

  • height: auto -画像の高さは比例してスケーリングされます

  • max-height: 100vw -画像の高さがビューポートよりも大きくなる場合、画面に合わせて縮小されます。その結果、次のプロパティのために画像の幅が縮小されます

  • object-fit: contain -置き換えられたコンテンツは、要素のコンテンツボックス内に収まりながらアスペクト比を維持するようにスケーリングされます

    注：object-fitIE 16.0以降のみ完全にサポートされています

— am0wa
ソース
1
ただし、その解決策と同様に、object-fitは残念ながらまだ広く使用されているIE11と互換性がないことに言及する必要があります。
— Blackbam
あなたは必要ありません@DivijSehgal object-fit明示的に使用することができたりobject-fit: fill;で、デフォルトを。
— am0wa 2018
垂直方向に中央揃えにしたい場合はどうでしょうか？
— Fmstrat
垂直方向に中央揃えにしたい場合はどうでしょうか。追加するだけです：margin：auto;
— 猫
このソリューションは、別の回答のhtmlおよびbodyスタイルと連携して機能します。html、body {width：100％; 高さ：100％; マージン：0; パディング：0; }
— Ivan Kovtun
3

私の一般的な遅延CSSルール：

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

これは、最初に低解像度の場合に画像を拡大することがあります（これは、画像の品質と寸法のサイズに関係しています。画像を中央に配置するには、（CSSで）

display:block;    
margin: auto 0;

画像を中央に配置する

あなたのHTMLで：

<div class="background"></div>
— usrrname
ソース
3

私はここにいくつかの答えがあることを知っていますが、これが私が使用したものです：

max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
— TomC
ソース
理由はわかりませんが、これは魅力のように機能します。説明が欲しい！
— SeedyROM
私もそうではありませんでしたが、何度も検索した結果、見つかりました。
— TomC
2

同様の要件があり、それを基本的なCSSとJavaScriptで行う必要がありました。使用可能なJQueryはありません。

これは私が働いたものです。 

<html>
      <head>
            <style>
                   img {
                          max-width: 95% !important;
                          max-height: 95% !important;
                       }
            </style>
            <script>
                   function FitImagesToScreen() {
                      var images = document.getElementsByTagName('img');
                      if(images.length > 0){
                         for(var i=0; i < images.length; i++){
                             if(images[i].width >= (window.innerWidth - 10)){
                                 images[i].style.width = 'auto';
                               }
                            }
                         }
                   }
             </script>
      </head>
      <body onload='FitImagesToScreen()'>
      ----    
      </body>
</html>

注： 考慮すべきパディングが常にあったため、画像幅に100％を使用していません。

— Rohit Vipin Mathews
ソース
2
CSS 3では、ビューポートの高さのパーセントとビューポートの幅のパーセントである「vh」ユニットと「vw」ユニットを取得します。単純にimg {max-width：95vw; max-height：95vh;}で十分な場合があります。
— bobpaul 2016年
あなたが答えとしてそれを追加することができるならば、後でこれに来る誰にとっても役に立つかもしれません。
— Rohit Vipin Mathews
表示可能領域に複数の画像を重ねることもできます。2つの画像の場合、ページのに2つのimgタグを挿入し、bodyに設定max-heightし49vhます。表示領域に3つ以上の画像を表示することは、読者の練習として残しておきます。
— Andrew Beals
2

それを簡単に。ありがとう

.bg {
  background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}
<div class="bg"></div>
スニペットを展開

— ハッサン・シディキ
ソース
ありがとう！style = "height：80vh;"を追加するだけです。画像タグで私のためにトリックをしました。
— トビアスJ.
1 
width: 100%;
overflow: hidden;

これでうまくいくと思います。

— RobinJ
ソース
こんにちは。回答に感謝しますが、イメージの高さがウィンドウよりも大きい場合は、論理的に機能しません。
— sebnukem
1
ええと...あなたがやろうとしていることは何ですか？あなたはそれをストレッチするのですか？または、元の比率をそのままにしておくべきですか（これはあなたが望むものだと思います）？
— RobinJ、2011年
1

@Rohitの回答に基づいて、これはChromeによって報告された問題を修正し、確実に画像のサイズを変更し、垂直に積み重ねられた複数の画像に対しても機能します<img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> 。 

<style>
    img {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
</style>
<script>
    function FitImagesToScreen() {
        var images = document.getElementsByTagName('img');
        if(images.length > 0){
            document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
            for(var i=0; i < images.length; i++){
                if(images[i].width >= (window.innerWidth - 10)){
                    images[i].style.width = 'auto';
                }
            }
        }
    }
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
スニペットを展開

— アンドリュービールス
ソース
0

このタグをスタイルタグで使用します

<style>
html {
  background: url(imagename) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
</style>
— vaibhav khunt
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.