Đáp ứng đối tượng đáp ứng: khắc phục sự cố trên Chrome

Question

Tôi biết có những câu hỏi khác về điều này, nhưng chúng cũ và không được cập nhật với hỗ trợ hiện tại của trình duyệt. Và họ không đề cập đến vấn đề cụ thể của Chrome với điều này.

Tôi muốn một video (Tôi muốn làm điều đó với hình ảnh quá, nhưng ở đây tôi đang sử dụng video) chiếm 100% chiều rộng của cửa sổ, nhưng với vùng chứa có chiều cao giới hạn, được chỉ định. Duy trì tỷ lệ khung hình của video (rất quan trọng).

Về cơ bản, object-fit: cover thực hiện công việc ở đây. Và trong Safari hoạt động hoàn hảo, video cao cấp/thu nhỏ bên trong vùng chứa của mình duy trì tỷ lệ khung hình.

Trong Chrome cũng xảy ra, nhưng không có sự tôn trọng về chiều cao của vùng chứa. Các yếu tố vượt quá chiều cao của container của mình và tiếp tục phát triển đến phía dưới theo chiều rộng của cửa sổ.

object-fit: fill cũng tốt trong cả hai trình duyệt, nhưng vấn đề ở đây là hiển nhiên, tỷ lệ khung hình không được tôn trọng, làm biến dạng video/hình ảnh/v.v.

Dưới đây là những gì tôi có:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid"> 
    <source src="image/video.mp4" type="video/mp4"> 
</video> 

CSS

#bgvid { 
    width: 100%; 
    min-width: 100%; 
    height: 445px; 
    max-height: 445px; 
    background-color: #f0f0f0; 
    object-fit: cover; /* cover works perfectly on Safari */ 
} 

Câu hỏi của tôi là, làm thế nào tôi có thể làm công việc này một cách hoàn hảo tôn trọng chiều cao thùng chứa (hoặc ít nhất chiều cao tối thiểu hoặc chiều cao tối đa), đáp ứng trong tất cả các trình duyệt, giữ tỷ lệ cỡ ảnh của phần tử?

---

Answer 1

Tôi vừa mới tự mình làm điều này. Dường như nếu bạn quấn phần video của bạn trong một div và thiết lập tràn như ẩn, sau đó nó sẽ làm việc xung quanh lỗi của Chrome, tức là một cái gì đó như:

<div class="wrapper"> 
    <video preload autoplay loop poster="poster.jpg" id="bgvid"> 
    <source src="image/video.mp4" type="video/mp4"> 
    </video> 
</div> 

với css

#bgvid { 
    width: 100%; 
    height: 100%; 
    background-color: #f0f0f0; 
    object-fit: cover; /* cover works perfectly on Safari */ 
} 

.wrapper { 
    width: 100%; 
    min-width: 100%; 
    height: 445px; 
    max-height: 445px; 
    overflow: hidden; 
} 

Tôi đã cũng chỉ tìm thấy một vài tập tin vấn đề mà dường như được che lỗi của Chrome về điều này:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890