Div İçerisindeki Görselin Odaklanması “object-fit”

Div İçerisindeki Görselin Odaklanması “object-fit”

Height’ı sabit bir alanda image’ı 100% vererek doğru şekilde scale etmek biraz uğraştıran bir işti. Ta ki object-fit özelliği gelene kadar. Object-Fit sabit heightlı bir alan içerisinde imagı odaklayarak size düzgün bir şekilde göstermeye yarıyor.

<img src="https://lorempixel.com/400/200/food" width="400" height="200">

olan bir img tagimiz olsun

.object-fit {
 width: 200px;
 height: 300px;
 object-fit: cover;
}

Bu şekilde bir css ile görseli alan içerisinde odaklayabiliriz.

Örnek:

http://jsfiddle.net/danield770/Lqqh22gf/12/