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

เมื่อใช้พร็อพเพอร์ตี้ 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;
}