แบบที่จะทำ: Iframe ที่สามารถปรับเปลี่ยนได้

เรียนรู้ว่าจะทำไมเพื่อสร้าง iframe ที่สามารถปรับเปลี่ยนได้ด้วย CSS

How To - Iframe ที่สามารถปรับเปลี่ยนได้

ขั้นที่หนึ่ง - เพิ่ม HTML:

ใช้องค์ประกอบโดเมนตัวแทนเช่น <div> และเพิ่ม iframe ลงในนั้น:

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

ขั้นที่สอง - เพิ่ม 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 宽高比 */

亲自试一试