Tôi đang cố gắng triển khai mới tập tin srcset
![]()
Tôi đã gặp một số trường hợp khó khăn với các thuộc tính không hoạt động bình thường hoặc tôi thiếu thứ gì đó.
Tôi đang sử dụng polyfill picturefill 2.1.0 và tôi đã đọc một số bài viết như http://ericportis.com/posts/2014/srcset-sizes/hoặc https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content .
Tôi có ý tưởng cho ví dụ rất đơn giản như:
src="nhỏ.jpg"
srcset="
nhỏ.jpg 100w,
trung bình.jpg 200w,
lớn.jpg 300w
"
kích thước="100vw"
>
Trình duyệt tải Small.jpg, Medium.jpg hoặc Large.jpg dựa trên kích thước màn hình, mật độ điểm ảnh, tỷ lệ và các yếu tố khác. Nó có thể tải Medium.jpg cho màn hình đơn giản 200px hoặc màn hình 100px hdpi (2x). Cho đến nay rất tốt.
Vấn đề phụ thuộc vàokích thước
tài sản. Trong ví dụ trước, chúng tôi đã thông báo cho trình duyệt rằng hình ảnh chiếm toàn bộ (100%) chiều rộng khung nhìn (vw).
Dự án tôi đang thực hiện sử dụng Foundation và nó cóTrơn tru,được đệm Lưới, có thể có nhiều hoặc ít cột dựa trên kích thước màn hình (truy vấn phương tiện).
Ví dụ: chúng tôi muốn một lưới có 2 cột cho màn hình nhỏ và 2 cột cho màn hình trung bình (chiều rộng tối thiểu: 40em
) có 4 cột. Mỗi cột chứa một hình ảnh. cái gì đúng kích thước
Hãy nhớ rằng mỗi cột có chiều rộng thay đổi và có em
phần đệm được xác định trong . Vâng?
src="nhỏ.jpg"
srcset="
nhỏ.jpg 160w,
trung bình.jpg 320w,
lớn.jpg 480w
"
>
-
size="(min-width: 40em) 25vw, 50vw"
-
size="(min-width: 40em) ???em, ???em"
-
size="(min-width: 40em) ???px, ???px"
vw
Phương thức bỏ qua phần đệm cột. em
hoặc px
Phương thức này bỏ qua thực tế là các cột có thể thay đổi được (tôi thậm chí không chắc chúng phải có những giá trị gì).
Có ý tưởng gì không?
Cảm ơn trước.
Vâng Foundation không hoạt động như vậy, hiện tại họ sử dụng javascript trao đổi dữ liệu
Xử lý thuộc tính mớitập tin srcset
:
data-interchange="[/path/to/default.jpg, (mặc định)],
[/path/to/small.jpg, (nhỏ)],
[/path/to/retina.jpg, (võng mạc)],
[/path/to/medium.jpg, (trung bình)],
[/path/to/bigger-image.jpg, (lớn)]"
>
data-interchange="[/path/to/default.jpg, (chỉ màn hình và (min-width: 1px))],
[/path/to/bigger-image.jpg, (chỉ màn hình và (chiều rộng tối thiểu: 1280px))]"
>
Sử dụng trao đổi hình ảnh
data-interchange="[image_path, (truy vấn phương tiện)], [image_path, (truy vấn phương tiện)]"
Sử dụng hình ảnh võng mạc
data-interchange="[image/path/to/retina.jpg, (retina)]"
Truy vấn có tên tùy chỉnh
$(document).foundation('interchange', {
tên_queries : {
my_custom_query : 'chỉ màn hình và (độ rộng tối đa: 200px)'
}
});
Trong trường hợp của bạn, bạn có thể tạo truy vấn có tên tùy chỉnh mới và chuyển nó tới Img của mình.
Giới thiệu về html - Sửa thuộc tính kích thước của img bằng cách sử dụng srcset trong vùng chứa truy vấn phương tiện đang chảy, được lấp đầy? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/26282676/
Tôi là một lập trình viên xuất sắc, rất giỏi!