ニューデイ(株)のロゴ

 IT備忘録 「JavaScript備忘録」

トップにスクロールする

~background-size の Cover、contain について

     (~Cover:〈…の〉表面をおおう、~contain:〈…を〉(内に)含む)


  1. ~contain

    
          no-repeatが無い場合、広げると複数の画面が表示される。
          no-repeatが有る場合、広げると画像は拡大しない。
            
          画面の縦か横の長い方に画像の縦か横にあわせる。
     
    
          例)
           ・画面の横縦の比率が、画像の横縦の比率と比べた時、画面の横幅が広い場合、
              像は、画面の横幅に合わせて縦の長さを大きくする。
              よって横は全画像は表示されるが、縦の画像の上部は表示されない。
    
           ・画面の横縦の比率が、画像の横縦の比率と比べた時、画面の縦幅が広い場合、
              画像は、画面の縦幅に合わせて縦の長さを大きくする。
              よって縦は全画像は表示されるが、横の画像の両側は表示されない。
    
            縮小も同じ。
    
      
            
            
  2. ~contain

    
          containは、画面の縦か横の短い方に画像の縦か横にあわせる。
    
          例)
           ・画面の横縦の比率が、画像の横縦の比率と比べた時、画面の横幅が短い場合、
              画像は、画面の横幅に合わせて縦の長さを短くして全画像が表示される。
          
           ・画面の横縦の比率が、画像の横縦の比率と比べた時、画面の縦幅が短い場合、
              画像は、画面の縦幅に合わせて横の長さを短くして全画像が表示される。
          
          縮小も同じ。
     
         
  3. ~clearfixによってfloatを解除する

         (~clearfix)


    1. 記述 例

      
                <div class="wap_pict clearfix">
      
                __________
      
              .clearfix:after {
                display: block;
                clear: both;
                content: "";
              }