Tôi có thể sử dụng <picture> cho cả hình ảnh có chiều cao và chiều rộng không?

Question

Tôi có một loại trình chiếu ở nơi ảnh sẽ mở rộng lớn nhất có thể, nhưng không vượt quá chiều rộng hoặc chiều cao của chế độ xem. Về cơ bản là object-fit: contain.

Tôi muốn làm cho những hình ảnh này phản hồi, vì "lớn nhất có thể" cho điện thoại và màn hình lớn tuyệt vời là sự khác biệt. Tôi không thể sử dụng <img srcset> vì ngay bây giờ, mật độ màn hình chỉ (x mô tả) hoặc chiều rộng (w mô tả). Vì vậy, để lại <picture> để tự tạo logic lựa chọn.

tôi bắt đầu với:

<picture> 
    <source media="(orientation:portrait)" 
      sizes="(max-width: 1200px) 100vw, 1200px" 
      srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w"> 
    <source sizes="(max-width: 1200px) 100vw, 1200px" 
      srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w"> 
    <img src="default.jpg" alt="a man slipping on a banana peel"> 
</picture> 

Nhưng nó không đơn giản như định hướng của màn hình, vì tỷ lệ khía cạnh thực tế tham gia có thể nhận được khá kỳ lạ, cả hai cho khung nhìn (điện thoại rất cao, thanh công cụ trình duyệt, vv) và cho chính những hình ảnh đó; cùng một hình ảnh có thể bị giới hạn theo chiều rộng trên một màn hình, nhưng bị giới hạn về chiều cao trên một màn hình khác. Tôi hình tôi có thể viết một kịch bản phân tích các tỷ lệ khung hình, nhưng tôi bị vướng vào logic để biến nó thành một danh sách có ý nghĩa srcset và sizes.

Lý tưởng nhất là<img srcset> sẽ get the h descriptor soon, nhưng tôi muốn chia sẻ thứ gì đó cùng nhau sẽ hoạt động ngay bây giờ.

Answer 1

Tôi nghĩ rằng tôi đã nhận nó (1/2) tương đương với (chiều rộng/chiều cao):

<img 
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w" 
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1/2))" 
    /> 

Hoặc với mã hơn:

<img 
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w" 
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1/2)), 100vw" 
    /> 

---

Như một mặt lưu ý: Tôi cũng đã viết một kịch bản tự động tính toán các kích thước phù hợp với các kích thước giới hạn chiều cao/chiều rộng của cha mẹ. Xem ở đây parent-fit script.