17 Ağustos 2018

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/

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın