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