歪み処理せずにCSSの画像

ときに良いUIデザイン、画像フォーマットは、一定の割合を持っています。しかし、あなたが知っている最後に絵から背中を引っ張られていないものの割合です。
あなたは、画像の幅と死者の高さに書き込む場合は、問題の画像の歪みがあるでしょう

現在、取り扱いの二つの方法がある
バックグラウンド処理の方法により、1。背景サイズの効果により、容器上に

<div class="img_background"></div>
.img_background{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      background-image: url('2.jpeg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
}

2、その使用目的フィット写真：カバー（推奨）

<div class="img_fit">
    <img src="2.jpeg"/>
</div>
.img_fit{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

オブジェクトフィット、特に5つの値：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

（方言の彼らの理解は、公式の解釈は公式サイトを参照してください）、次のように各属性値の特定の意味：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

二つ達成するための方法と効果、そして実際には原理は同じです。スケーリングによって全体のサイズをカバーした後、あります。中心。
あなたは歪みのない画像をしたい場合ので、ズームする、確かです。