<h1>object-fit değerleri</h1>
<article>
<section>
<h2>Orijinal resim</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>Resimlere her hangi bir boyut tanımı yapılmadığı için içerik boyutları ile kutu boyutları aynı oldu.</p>
</section>
<section class="base">
<h2>Resim kutusuna boyut tanımlandı</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>Resim kutusuna 200px genişlik ve 200px yükseklik tanılanmış hali. Sonuçta resimler büzüldü. En/boy oranı dikkate alınmadı.</p>
</section>
<section class="base fill">
<h2>object-fit: fill</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>En/boy oranına bakılmaksızın görüntüyü içerik kutusuna uyacak şekilde uzatan varsayılan değerdir.</p>
</section>
<section class="base contain">
<h2>object-fit: contain</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.</p>
</section>
<section class="base cover">
<h2>object-fit: cover</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>Resim, en/boy oranını koruyarak ancak işlem sırasında resmi kırparak kutunun yüksekliğini ve genişliğini dolduracaktır.</p>
</section>
<section class="base scale-down">
<h2>object-fit: scale-downn</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>Resim, en küçük somut nesne boyutunu bulmak için none ve contains arasındaki farkı karşılaştıracaktır ve uygun olanı uygulayacaktır.</p>
</section>
<section class="base none">
<h2>object-fit: none</h2>
<img src="http://fatihhayrioglu.com/images/mevlana.jpg" alt="">
<img src="http://fatihhayrioglu.com/images/koy_06.jpg" alt="">
<p>Resim orijinal halindeki boyutlarını korur ve içerik kutusu içine sığmaya çalışmaz. İçerik kutusundan taşan kısımlar kırpılır.</p>
</section>
</article>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #e8e8e8;
}
article {
width: 800px;
margin: 20px auto;
box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
}
section {
text-align: center;
padding: 20px 40px;
}
section:nth-child(odd) {
background: #ccc;
}
h1 {
text-align: center;
}
img {
border: 1px solid black;
margin-right: 20px;
}
.base img {
width: 200px;
height: 200px;
}
.fill img {
object-fit: fill;
}
.contain img {
object-fit: contain;
}
.cover img {
object-fit: cover;
}
.scale-down img {
object-fit: scale-down;
}
.none img {
object-fit: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.