Sử dụng các kích thước thuộc tính cho hình ảnh reponsive

Question

Tôi đang trong quá trình cố gắng quấn quanh đầu bằng cách sử dụng srcset và sizes trên img thẻ.

Mặc dù tôi nghĩ rằng mình đã nắm được các khái niệm cơ bản - chủ yếu nhờ vào bài viết this - Tôi đang gặp khó khăn trong việc áp dụng thực tế thuộc tính sizes.

Trong tất cả các ví dụ tôi có thể tìm thấy, mọi thứ được đơn giản ồ ạt và thuộc tính kích thước được khai báo như ở mỗi điểm ngắt, chiều rộng hình ảnh sẽ là tỷ lệ chính xác của chiều rộng khung nhìn, cho phép sử dụng đơn vị vm. Ví dụ:

sizes="(min-width: 36rem) 33.3vw, 
     100vw" 

Tất nhiên trong cuộc sống thực, hình ảnh thường trong container khác mà bản thân có thể là trong container khác và như vậy, mỗi lề riêng, đệm hoặc vị trí của họ. Có công bằng khi nói rằng trong tất cả trừ trường hợp đơn giản nhất (khi hình ảnh có chiều rộng chất lỏng và không đơn giản là tỷ lệ phần trăm chính xác của chế độ xem), phải sử dụng calc, có khả năng thêm các tính toán phức tạp vào đánh dấu html một kích thước hình ảnh cần phải được tính toán làm việc từ chiều rộng khung nhìn, xuống qua bất kỳ vùng chứa nào cho hình ảnh? Ví dụ: bạn sẽ tính toán kích thước chính xác cho một hình ảnh nằm trong vùng chứa với đệm 7px bên trong vùng chứa là 45% vùng chứa với lề 15px bên trong thanh bên là 25% của trang chứa chính 15px đệm và có chiều rộng tối thiểu là 1220px?

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)), 
     100vw" 

Cố gắng tính toán điều này trong thuộc tính kích thước có vẻ lố bịch, nhất là khi tất cả điều này có thể thay đổi tại mỗi điểm ngắt. phải giữ cho tính toán ồ ạt phức tạp này đồng bộ với những thay đổi đối với CSS có vẻ như điên rồ. Và sau đó bạn có hỗ trợ trình duyệt bị vá cho calc.

Tôi cảm thấy mình thiếu một điều gì đó hiển nhiên, nhưng nó là gì?

Lưu ý: Tôi biết về sự xuất sắc của Alexander Farkas Lazy Sizes tính toán kích thước cho bạn thông qua việc sử dụng thuộc tính data nhưng tôi quan tâm đến việc sử dụng tiêu chuẩn.

Answer 1

Trước hết% đơn vị không được phép trong sizes. Bạn phải sử dụng các đơn vị vw. (Có thể bao gồm chiều rộng thanh cuộn). Vì vậy, 25% của bạn sẽ trở thành 24-25vw ví dụ. Thứ hai không có sự khác biệt thực sự giữa rem và em (trong bối cảnh thuộc tính kích cỡ). Trong trường hợp bạn không sử dụng truy vấn phương tiện dựa trên em/rem/min-width/max-width trong CSS của bạn, không bao giờ sử dụng các truy vấn đó trong thuộc tính kích thước của bạn.

Kích thước cơ bản không cần phải khớp chính xác với kích thước hình ảnh thực của bạn 100%. Nó là một nói cho trình duyệt để tìm các ứng cử viên hình ảnh đúng khoảng.

Quy tắc tối thiểu: 1200px cũng như mọi mức sử dụng tối đa trong CSS của bạn, phải rõ ràng là một phần của điều kiện phương tiện mới trong thuộc tính kích thước của bạn.

này lá chúng tôi với phần kích thước sau:

(min-width: 1200px) calc(11vw - 44px) 

Trong trường hợp bạn thêm có một max-width xác định hoặc một truy vấn phương tiện truyền thông mà dừng sidebar từ phát triển, bạn có thể ít chính xác và đơn giản là chuyển đổi 11vw - 44px vào 10vw:

Ví dụ:

sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>" 

Về hỗ trợ calc: picturefill 3.0 beta cũng như respimage, làm bao gồm hỗ trợ calc cho IE8 +, vì vậy tất cả trình duyệt s mà kích thước hỗ trợ có đủ hỗ trợ calc tốt và tất cả các trình duyệt polyfile respimage làm hỗ trợ calc trong các kích cỡ cũng có.

Giới thiệu việc này ngay lập tức. Điều này rõ ràng là đau đớn và trong hầu hết các trường hợp, hệ thống CMS/backend của bạn sẽ trợ giúp ở đây. Trong hầu hết các dự án, bạn nên đồng ý với một tập hợp giới hạn các định dạng hình ảnh được phép và viết kích thước cho các định dạng tương ứng với thiết kế của bạn. Và chương trình phụ trợ của bạn nên quản lý để đính kèm các kích thước đó vào đúng vị trí. Trong trường hợp điều này là không thể. Hoặc sử dụng thực sự lazySizes hoặc sử dụng srcset với sizes ít nhất là cho những hình ảnh quan trọng nhất (ví dụ: định dạng hình ảnh lớn, bởi vì đây là nơi bạn có thể lưu dữ liệu nhiều nhất).

---

Nếu bạn muốn, bạn có thể chọn một trang web thực và chúng tôi đính kèm đúng kích cỡ. Nhưng hãy nhận biết. Nó phải là chỉ giới hạn chiều rộng. Tiêu chuẩn hiện không hỗ trợ hình ảnh có độ cao bị giới hạn (Đây chỉ là tính năng lazysizes).