CSS Konuları
CSS ile Resmi Sığdırma
02/03/2025
Görselleri belirli bir alan içerisine sığdırmak için CSS object-fit özelliği kullanılır.
Örnek olarak aşağıdaki 350px genişlik, 200px yüksekliğe sahip bir çerçeve içerisinde bulunan görsel çerçevenin tamamını doldurmuyor, çerçeve içerisinde kalan boşlukları object-fit özelliği ile doldurmak mümkün.
Object-fit Özellikleri
object-fit:cover, object-fit:contain ve object-fit:fill özellikleri ile resim tercih edilen şekilde belirli bir alana sığdırılır.
| Özellik | Açıklama |
|---|---|
| cover | Sınırlı alanın tamamını doldurur, alanı doldurmak için görseli kenarlarından keser. |
| contain | Görsel en boy oranı korunarak sınırlı alanın içeriğine sığdırılır. |
| fill | Sınırlı alanın tamamını doldurur, en ve boy oranı korunmaz, görsel streç yapıda görünebilir. |
| none | Görseli yeniden boyutlandırmaz, mevcut boyutlarından bir parça gösterir. |
| scale-down | contain ve none arasındaki en küçük boyutu seçer. |
object-fit özelliği ile birlikte width:100% ve height:100% özelliklerinin de kullanılması gerekir.
object-fit: cover
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/microsoft-project-natick.png.webp">
</div>object-fit: contain
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/microsoft-project-natick.png.webp">
</div>object-fit: fill
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:fill;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/microsoft-project-natick.png.webp">
</div>object-fit: none
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:none;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/microsoft-project-natick.png.webp">
</div>object-fit: scale-down
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:scale-down;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/webp-express/webp-images/uploads/microsoft-project-natick.png.webp">
</div>