ລະບົບຄຸນະພາບ object-position
- ບໜ້າຫລັງ object-fit
- ບໜ້າຕໍ່ໄປ offset
ການກໍານົດ ແລະ ການນໍາໃຊ້
ປະສັບ object-position ພ້ອມກັບ object-fit ສາມາດກຳນົດວິທີທີ່ຈະນຳໃຊ້ ວິທີ x/y ສຳລັບ <img> ຫລື <video> ໃນ “ບັນດາບັນນາທິການຂອງພວກເຂົາ”.
ບໍ່ດັ່ງນັ້ນ ເບິ່ງ:
CSS ການສອນ:CSS object-fit
CSS ການບັນທຶກ:CSS object-position
ຄູ່ມັດ HTML DOM ການບັນທຶກ:ປະສັບ objectPosition
ຕົວຢ່າງ
ການກັບຄູ່ມັດຂະໜາດພາບເພື່ອຈະກັບກັບບັນດາບັນນາທິການຂອງພວກເຂົາ, ແລະ ເພື່ອປ້ອນພາບພາຍໃນບັນດາບັນນາທິການດັ່ງກ່າວຈາກຂ້າງຊ້າຍ 5px, ຈາກຫລັງ 10%:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
ສັບພາສາ CSS
object-position: position|initial|inherit;
ຄູ່ມັດສັນຕິພາບ
| ຈຳນວນ | ການອະທິບາຍ |
|---|---|
| position |
ພົບກັບບ່ອນທີ່ຕັ້ງຂອງພາບຫລືວິດີໂອໃນຂອງບັນດາບັນນາທິການທີ່ມີຄວາມກຳນົດ. ຈຳນວນທີໜຶ່ງຄວບຄຸມ ສາມາດ x-axis, ຈຳນວນທີສອງຄວບຄຸມ y-axis. ສາມາດເປັນຄຳເວົ້າ (left, center ຫລື right) ຫລື ຈຳນວນ (ດ້ວຍ px ຫລື %). ອະນຸຍາດມີຄູ່ມັດລົງ. |
| initial | ການຕັ້ງມັນໃຫ້ຢູ່ໃນຄູ່ມັດທີ່ຄົງສົມທົບ. ເບິ່ງ: initial. |
| inherit | ຍັງພົວພັນກັບປະກອບສັບສວນຜູ້ພິມປົກກະຕິ. ເບິ່ງ: inherit. |
ລະອຽດເຕັກນິກ
| ຄູ່ມັດທີ່ຄົງສົມທົບ: | 50% 50% |
|---|---|
| ການຕ້ອນຕາມ: | ໄດ້ |
| ຜູ້ສ້າງອາກາດ: | ການສະໜັບສະໜູນ. ບັນຈາກ:ບັນດາບັນດາປະສັບທາງອາກາດ. |
| ແບບລະດັບ: | CSS3 |
| ສັບພາສາ JavaScript: | object.style.objectPosition="0 10%" |
ການສະໜັບສະໜູນບັນນາທິການ
ຈຳນວນທີ່ຢູ່ໃນຕາມການຕັ້ງຢູ່ບ່ອນທີ່ສຸດທ້າຍຂອງບັນດາບັນນາທິການໄດ້ສະໜັບສະໜູນບັນດາປະສັບສັນຕິພາບນັ້ນ.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- ບໜ້າຫລັງ object-fit
- ບໜ້າຕໍ່ໄປ offset
