cuốn sách gpt4 ai đã làm

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, đầy?

In lại Tác giả: Hồ Xil Thời gian cập nhật: 2023-11-01 13:32:34 27 4
mua khóa gpt4 Nike

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ướctà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ướcHã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
    "
    >


  1. size="(min-width: 40em) 25vw, 50vw"
  2. size="(min-width: 40em) ???em, ???em"
  3. size="(min-width: 40em) ???px, ???px"

vwPhương thức bỏ qua phần đệm cột. emhoặc pxPhươ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.

câu trả lời hay nhất

Vâng Foundation không hoạt động như vậy, hiện tại họ sử dụng javascript trao đổi dữ liệuXử 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/

27 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress