ฉันมีไซต์ที่จะรวบรวมซึ่งมีอัตราส่วนภาพคงที่ประมาณ16:9
แนวนอนเช่นวิดีโอ
ฉันต้องการให้มันอยู่ตรงกลางและขยายเพื่อเติมเต็มความกว้างที่มีอยู่และความสูงที่มี แต่อย่าให้ใหญ่ขึ้นจากด้านใดด้านหนึ่ง
ตัวอย่างเช่น:
- หน้าสูงและบางจะมีเนื้อหายืดเต็มความกว้างในขณะที่รักษาความสูงตามสัดส่วน
- หน้ากว้างสั้น ๆ จะมีเนื้อหายืดเต็มความสูงโดยมีความกว้างตามสัดส่วน
มีสองวิธีที่ฉันกำลังดู:
- ใช้รูปภาพที่มีอัตราส่วนกว้างยาวเพื่อขยายคอนเทนเนอร์
div
แต่ฉันไม่สามารถทำให้มันทำงานในลักษณะเดียวกันกับเบราว์เซอร์หลัก ๆ - การตั้งค่าช่องว่างด้านล่างตามสัดส่วน แต่ใช้ได้กับความกว้างเท่านั้นและไม่สนใจความสูง มันจะใหญ่ขึ้นเรื่อย ๆ ตามความกว้างและแสดงแถบเลื่อนแนวตั้ง
ฉันรู้ว่าคุณสามารถทำสิ่งนี้กับ JS ได้ค่อนข้างง่าย แต่ฉันต้องการโซลูชัน CSS ที่บริสุทธิ์
ความคิดใด ๆ ?
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%