ການນຳໃຊ້ object-position CSS

CSS object-position ຜົນຜະສົມໃຊ້ເພື່ອການຕິດຕັ້ງຕຳນານ <img> ຫລື <video> ໃນກອງຂອງພວກເຂົາ.

ພາບ

ກວດຄືວາມຂວັນຄືວາມຍາວຂອງພາບຈາກວຽງຮົງ, ຂະໜາດ 600x400 ຕົວລະຄາດັບ:

ວຽງຫັນ

ຫລັງຈາກນັ້ນ, ພວກເຮົາຈະໃຊ້ object-fit: cover; ເພື່ອກັກຄວາມຂວັນຄວາມຍາວຂອງພາບແລະກັບຕົວເລກຄວາມຂວັນຄວາມຍາວທີ່ກໍານົດ. ແຕ່ພາບຈະຖືກຕັດສິນເພື່ອຈະກັບຕົວເລກຄວາມຂວັນຄວາມຍາວ, ຕາມທີ່ສະແດງນີ້:

ວຽງຫັນ

Example

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

Try It Yourself

ຜົນຜະສົມ object-position

ກ່າວວ່າພາບທີ່ສະແດງຈະບໍ່ໄດ້ຢູ່ໃນການຕິດຕັ້ງທີ່ພວກເຮົາຕ້ອງການ. ເພື່ອການຕິດຕັ້ງພາບ, ພວກເຮົາຈະໃຊ້ object-position ຜົນຜະສົມ.

ພວກເຮົາຈະໃຊ້ object-position ຜົນຜະສົມໃຊ້ເພື່ອການຕິດຕັ້ງພາບຕັດພວງທີ່ຢູ່ກາງ:

ວຽງຫັນ

Example

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

Try It Yourself

ພວກເຮົາຈະໃຊ້ object-position Use properties to position the image, so that the famous corner of the Forbidden City is located on the right:

ວຽງຫັນ

Example

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

Try It Yourself

CSS object-* Properties

The following table lists CSS object-* properties:

Property Description
object-fit Specify how <img> or <video> should be resized to fit its container.
object-position Specify how <img> or <video> should be positioned within its 'own content box' using x/y coordinates.