การ์ดรูปภาพสัดส่วนภาพ

เมื่อใช้พร็อพเพอร์ตี้ aspect-ratio ขณะปรับขนาดการ์ด บล็อกภาพสีเขียวจะคงสัดส่วนภาพ 16 x 9 นี้ไว้ เราเคารพสัดส่วนภาพด้วย aspect-ratio: 16 / 9

.video {
  aspect-ratio: 16 / 9;
}

หากต้องการรักษาสัดส่วนภาพ 16 x 9 โดยไม่ใช้พร็อพเพอร์ตี้นี้ คุณต้องใช้padding-topแฮ็กและเพิ่มระยะห่างจากขอบด้านบน 56.25% เพื่อกำหนดสัดส่วนความสูงต่อความกว้าง เราจะเพิ่มพร็อพเพอร์ตี้สำหรับการดำเนินการนี้ในเร็วๆ นี้เพื่อหลีกเลี่ยงการแฮ็กและความจำเป็นในการคำนวณเปอร์เซ็นต์ คุณสามารถสร้างสี่เหลี่ยมจัตุรัสที่มีสัดส่วน 1 / 1, สัดส่วน 2:1 ที่มี 2 / 1 และอื่นๆ ที่ต้องการเพื่อให้รูปภาพนี้ปรับขนาดตามสัดส่วนขนาดที่กำหนด

.square {
  aspect-ratio: 1 / 1;
}

HTML

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

CSS


        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}