CSSで画像をトリミング [ object-fit ]

□　object-fit プロパティーで使える値

fill（初期値）
　ボックス内を満たすように縦横比を変えながらリサイズされます。
none
　リサイズせず、そのまま表示します。
cover
　縦横比を保持してボックスを完全に覆うようリサイズされます。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます。
contain
　縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
scale-down
　none と contain のうち、小さい方のサイズに合わせて表示します。

上の画像を　width: 250px height: 200pxにトリミング

  fill （初期値）
  
      img {
        width: 250px;
        height: 200px;
        object-fit: fill;
      }

  none
  
    img {
      width: 250px;
      height: 200px;
      object-fit: none;
    }

  cover
  
    img {
      width: 250px;
      height: 200px;
      object-fit: cover;
    }

  contain
  
    img {
      width: 250px;
      height: 200px;
      object-fit: contain;
    }

  scale-down
  
    img {
      width: 250px;
      height: 200px;
      object-fit: scale-down;
    }

画像を任意の位置でトリミング [ object-position ] ∩

  cover
  
    .left-img {
      object-fit:cover;
      object-position:0 100% ;
    }
    .right-img {
      object-fit:cover;
      object-position:0 0 ;
    }

画面を縦に半分割・背景画像をトリミングして配置 ∩

    .screen {
      display: flex;
      width: 1200px;
    }
    .img-wrap{
      width: 600px;
      height: 500px;
    }
    .hamster-1 {
        background: url(../img/hamster-1.jpg) no-repeat center 60%;
        background-size: cover;
    }
    .hamster-2 {
        background: url(../img/hamster-2.jpg) no-repeat  center 90%;
        background-size: cover;
    }

ジャンガリアン

((Phodopus sungorus))

習性

基本的に温和な性格ですが、警戒したり興奮したりすると「キーキー」「チッチ」と声を出し威嚇します。
さらに興奮すると仰向けの姿勢で切歯を見せて「ギーギー」と甲高い声をあげます。
ハムスターは夜行性で、明け方と夕方に餌を探すために活動します。