Chia tỷ lệ phần tử đối tượng theo chiều rộng thành chiều rộng + không đổi với CSS

Question

Đây là vấn đề ở mức cao: Tôi có trình phát video Flash cho video 16: 9. Tổng chiều cao của trình phát được thực hiện bởi chính video đó cùng với một số điều khiển. Chiều cao của các điều khiển là không đổi bất kể chiều cao của trình phát tổng thể. Vì vậy, những gì tôi muốn làm là có quy mô người chơi với CSS sao cho chiều cao thỏa mãn phương trình: y = rx + C, trong đó x là chiều rộng, r là tỷ lệ chiều cao của video với chiều rộng video và C là hằng số chiều cao của các điều khiển.

Tôi đã làm việc ra một cái gì đó mà làm việc trong Webkit, nhưng dường như không có gì khác:

#video-container { 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    position:relative; 
    width: 100%; 
} 
#video-container object { 
    height: 100%; 
    padding-bottom: 50px; /* control height */ 
    position: absolute; 
    width: 100%; 
} 

Trong Webkit, bộ phim Flash sẽ mở rộng theo chiều dọc để lấp đầy diện tích đệm phía dưới. Tuy nhiên, trong mọi trình duyệt khác, phần đệm dưới cùng chỉ là không gian trống.

Có giải pháp chỉ CSS để mở rộng chiều cao của phần tử tỷ lệ thuận với chiều rộng cộng với một số giá trị không đổi? Có rất nhiều câu hỏi về SO liên quan đến tỷ lệ tỷ lệ thuận, nhưng phần không đổi là phần khó khăn.

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrate ý tưởng "tỷ lệ thuận với chiều rộng cộng với một số giá trị không đổi" cho height. Nó dựa trên ý tưởng ban đầu của bạn, với một tinh chỉnh. Nó dường như thử nghiệm tốt trong IE8 +, Chrome, Firefox.

Về cơ bản, mã bạn sẽ cần phải có lẽ là đây:

#video-container { 
    position:relative; 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    padding-top: 50px; /* add constant */ 
} 

#video-container object { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
}