CSS object-fit 属性

CSS object-fit 属性用于规定应如何调整 或

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit 属性

CSS object-fit 属性用于指定应如何调整 或

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

ບັນດາຮູບໄມແຄັນທີ່ມາຈາກຫນັງຕົວປັນຕາຫນົງຫົວຮູບຂອງຊາວຫາງ, ມີຄວາມຍາວວັດທະນະທຳ 300x300 ປີມ:

Tulip

ແຕ່, ຖ້າພວກເຮົາຕັດຕັດກາງຮູບໃຫ້ 200x300 ປີມ, ມັນຈະເບິ່ງຄືເຫັນເຊັ່ນນີ້:

Tulip

实例

img {
  width: 200px;
  height: 300px;
}

亲自试一试

ພວກເຮົາເຫັນວ່າຮູບຖືກກົດດັງເພື່ອກັບກັບບັນດາຄວາມຍາວວັດທະນະທຳ 200x300 ປີມ, ແລະຄວາມສະໝອງທໍາລາຍ:

ຖ້າພວກເຮົານຳໃຊ້: object-fit: cover;ປະຈຸບັນ, ມັນຈະຕັດຕັດກາງຮູບຈະຕັດເປົ່າພາຍໃນຂອງປ່ອງການຄົ້ນຫາ, ຮັກສາຄວາມສະໝອງຍັງຢູ່, ແລະລວມຄວາມກະຈັງກະຈັງຍັງ, ອີງຕາມນີ້:

Coffee

实例

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

亲自试一试

ຄັນຄົນອື່ນ:

ໃນທີ່ນີ້, ພວກເຮົາມີບັນດາຮູບສອງບັນດາຫນັງ, ພວກເຮົາຕ້ອງການໃຫ້ບັນດາຮູບລວມຄວາມກະຈັງກະຈັງຍັງຢູ່ 50% ຂອງຄວາມຍາວຂອງປ່ອງການຄົ້ນຫາ ແລະ 100% ຂອງຄວາມຫນັງ:

ໃນຄັນຄົນຕໍ່ໄປ, ພວກເຮົາບໍ່ນຳໃຊ້: object-fitດັ່ງນັ້ນ, ເມື່ອພວກເຮົາດັດແປງຂະໜາດປ່ອງການຄົ້ນຫາ, ຄວາມສະໝອງຂອງຮູບຈະຖືກທໍາລາຍ:

实例

亲自试一试

ໃນຄັນຄົນຕໍ່ໄປ, ພວກເຮົານຳໃຊ້: object-fit: cover;ດັ່ງນັ້ນ, ເມື່ອພວກເຮົາດັດແປງຂະໜາດປ່ອງການຄົ້ນຫາ, ຄວາມສະໝອງຂອງບັນດາຮູບຈະຢູ່ເວລາ:

实例

亲自试一试

ທັງໝົດຄຳນວຍໃຊ້ຂອງ CSS object-fit

object-fit ປະເພດປະສົມບັນຈຳກັບຄຳນວຍໃຊ້:

  • fill - ຜົນສົມທອນເສລີ. ພວດມູນທີ່ປ່ຽນດັງຈະຖືກຂະຫຍາຍມູນຂະໜາດເພື່ອລວມຄວາມກະຈັງກະຈັງຍັງ. ຖ້າຈຳເປັນ, ຈະຂະຫຍາຍຫຼືຫາຍຍາວເພື່ອຮັບກັບວັດທະນະທຳນັ້ນ.
  • contain - ຂະຫຍາຍມູນຂະໜາດທີ່ປ່ຽນດັງເພື່ອຮັກສາຄວາມສະໝອງຍັງຢູ່, ແລະເຂົ້າໃນການລວມຄວາມກະຈັງກະຈັງຍັງ.
  • cover - ພວດມູນຂະໜາດຂອງການປ່ຽນດັງປະຈຳວັດທະນະທຳເພື່ອຮັກສາຄວາມສະໝອງຍັງຢູ່ໃນການລວມຄວາມກະຈັງກະຈັງຍັງ. ວັດທະນະທຳຈະຖືກຕັດເປົ່າເພື່ອຮັບຂອງວັດທະນະທຳ.
  • none - 不对替换的内容调整大小。
  • scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

下面的例子演示了 object-fit 属性的所有可能值：

实例

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

亲自试一试