ວິທີໃນການກໍ່ຕັ້ງ: Responsive Iframe

ບິນຮຽນວິທີໃນການກໍ່ຕັ້ງ responsive iframe ທີ່ໃຊ້ CSS.

Responsive iframe

ສ້າງ iframe ທີ່ມີຄວາມມີຂອບເຂດທີ່ກັນກັນໃນການປະກອບຄວາມສູງສູງ (4:3, 16:9 ແລະອື່ນໆ):

ຫຍັງຈະມີຄວາມມີຂອບເຂດ?

ຄວາມມີຂອບເຂດຂອງປະກອບສະແດງ ເປັນຄວາມມີຄວາມສູງສູງສູງແລະຄວາມມີຂອບສູງສູງສູງຂອງປະກອບ. ຄວາມມີຂອບເຂດທີ່ມັກຢູ່ອາດີດຂອງປະກອບສະແດງວ່າ 4:3 (ການປະກອບຄວາມສູງສູງທີ່ເປັນການປະກອບຄວາມສູງສູງທີ່ມັກຢູ່ອາດີດ) ແລະ 16:9 (ການປະກອບຄວາມສູງສູງທີ່ເປັນການປະກອບຄວາມສູງສູງທີ່ມັກຢູ່ອາດີດທີ່ເປັນການປະກອບຄວາມສູງສູງທີ່ມັກຢູ່ອາດີດທີ່ເປັນການປະກອບຄວາມສູງສູງທີ່ມັກຢູ່ອາດີດ).

How To - Responsive Iframes

ບາງການທີ 1 - ກໍ່ຕັ້ງ HTML:

ນຳໃຊ້ປະກອບມົນລະພາບ, ເຊັ່ນ <div>, ແລະເພີ່ມ iframe ໃສ່ພວກມັນ:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

ບາງການທີ 2 - ກໍ່ຕັ້ງ CSS:

ເພື່ອ padding-top ການເພີ່ມຕົວຈຳນວນສິບສອງເປັນຄວາມມີຂອບເຂດຂອງ div ເພື່ອກັນກັນການປະກອບຄວາມສູງສູງ. ຄວາມມີຂອບເຂດທີ່ເປັນການປະກອບຄວາມສູງສູງ 16:9 ແມ່ນການປະກອບຄວາມສູງສູງສະຖານີ YouTube ທີ່ເປັນການປະກອບຄວາມສູງສູງສະຖານີທີ່ເປັນການປະກອບຄວາມສູງສູງທີ່ມັກຢູ່ອາດີດ.

ຄວາມມີຂອບເຂດ - 16:9 ການປະກອບຄວາມສູງສູງ

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ການປະກອບຄວາມສູງສູງ (9 ທຽບ 16 ທຽບ 0.5625) */
}
/* ຕາມມາກໍ່ຕັ້ງກຳນົດຮູບແບບ iframe ເພື່ອໃຫ້ມີຄວາມສູງສູງສູງແລະຄວາມມີຂອບສູງສູງໃນການປະກອບ div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

亲自试一试

ການປະກອບຄວາມສູງສູງອື່ນໆ

ຄວາມມີຂອບເຂດ - 4:3 ການປະກອບຄວາມສູງສູງ

.container {
  padding-top: 75%; /* 4:3 ການປະກອບຄວາມສູງສູງ */
}

亲自试一试

ຄວາມມີຂອບເຂດ - 3:2 ການປະກອບຄວາມສູງສູງ

.container {
  padding-top: 66.66%; /* 3:2 ການປະກອບຄວາມສູງສູງ */
}

亲自试一试

ຄວາມມີຂອບເຂດ - 8:5 ການປະກອບຄວາມສູງສູງ

.container {
  padding-top: 62.5%; /* 8:5 ການປະກອບຄວາມສູງສູງ */
}

亲自试一试

ຄວາມມີຂອບເຂດ - 1:1 ການປະກອບຄວາມສູງສູງສູງ (ຄວາມສູງແລະຄວາມມີຂອບສູງສູງສູງ)

.container {
  padding-top: 100%; /* 1:1 宽高比 */
}

亲自试一试