Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

object-* CSS özellileri ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

57 views

object-fit CSS özelliği, bir <img> veya <video> gibi yerleştirme öğelerinin boyutlandırılmasını ve nasıl gösterileceğini kontrol eder. Bu özellik, öğenin boyutları ile onun içerdiği kutunun (genellikle bir div veya başka bir konteyner) boyutları arasındaki ilişkiyi yönetir. object-fit özelliği, özellikle responsive web tasarımında çok yararlıdır çünkü içeriğin farklı ekran boyutları ve oranlarına uyum sağlamasını sağlar.

Kullanılabilir Değerler:

fill: Öğenin içindeki kutuyu tamamen dolduracak şekilde boyutlandırır, bu da orijinal oranın bozulmasına neden olabilir.

contain: Öğenin tamamı görünür olacak şekilde oranı korunur ve gerektiğinde boşluklar oluşabilir.

cover: Öğenin içindeki kutuyu tamamen kaplayacak şekilde boyutlandırır ve orijinal öğenin bazı kısımları kırpılabilir.

none: Öğe orijinal boyutunda kalır ve boyutlandırma yapılmaz.

scale-down: none veya contain değerlerinden biri gibi davranır, öğeyi küçültür ancak orijinal boyutunu aşmaz.

object-fit özelliği, modern web tasarımında görsellerin ve videoların estetik bir şekilde sunulmasını sağlayan önemli bir araçtır. Bu özellik sayesinde, geliştiriciler ve tasarımcılar içeriklerini farklı cihazlarda ve ekran boyutlarında daha iyi kontrol edebilir ve kullanıcı deneyimini önemli ölçüde iyileştirebilirler.

 

object-position CSS özelliği, object-fit özelliği ile birlikte kullanıldığında, bir yerleştirme öğesinin (örneğin, <img> veya <video>) içerdiği kutu içindeki konumunu belirler. Bu özellik, özellikle object-fit özelliği cover, contain, scale-down, veya none olarak ayarlandığında yararlıdır ve yerleştirme öğesinin içindeki kutuya nasıl hizalandığını kontrol etmenizi sağlar.

object-position: <x-pos> <y-pos>;

<x-pos> ve <y-pos> değerleri, öğenin konumlandırılacağı x (yatay) ve y (dikey) pozisyonlarını belirtir. Bu değerler uzunluk birimleri (örn. px, em, % vb.) veya özel anahtar kelimeler (top, right, bottom, left, center) ile belirtilebilir.

 

TailwindCSS:

Object Fit:

Class
Properties
object-contain object-fit: contain;
object-cover object-fit: cover;
object-fill object-fit: fill;
object-none object-fit: none;
object-scale-down object-fit: scale-down;

 

1.png

1.png

 

Object Position:

Class
Properties
object-bottom object-position: bottom;
object-center object-position: center;
object-left object-position: left;
object-left-bottom object-position: left bottom;
object-left-top object-position: left top;
object-right object-position: right;
object-right-bottom object-position: right bottom;
object-right-top object-position: right top;
object-top object-position: top;

 

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...