CSS object-position এট্রিবিউট

CSS object-position 属性用于指定或

图像

看看下面这张来自武汉的图像，尺寸为 600x400 像素：

接下来，我们使用 object-fit: cover; 来保持宽高比并填充给定的尺寸。然而，图像将被裁剪以适应，如下所示：

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

假设显示的图像部分不是我们想要的位置。为了定位图像，我们将使用 object-position 属性。

এখানে, আমরা ব্যবহার করবো object-position 属性来定位图像，使古老的建筑位于中心：

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

এখানে, আমরা ব্যবহার করবো object-position এট্রিবিউট দ্বারা ইমেজ স্থানান্তর করে, বিখ্যাত লালকেল্লার পিছনের প্রান্তকে ডানদিকে স্থানান্তর করুন:

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

নিচের টেবিলে CSS object-* এট্রিবিউটস তুলে দেওয়া হলো:

এট্রিবিউট	বর্ণনা
object-fit	কোনও <img> বা <video> কেমন তার মাপ সাজানো উচিত তা নির্দিষ্ট করুন যাতে তা তার কনটেনারের সাথে মানিত হয়。
object-position	কোনও <img> বা <video> কেমন তার 'স্বয়ংক্রিয় কনটেন্ট বক্স' এর ভিতরে x/y কোর্নারে অবস্থান করা উচিত তা নির্দিষ্ট করুন。