# 133: Tìm ra hình ảnh đáp ứng - Thủ thuật CSS

Anonim

Tôi có lẽ hơi hiếm khi tôi thích cố gắng cập nhật những thứ về hình ảnh phản hồi. Đó là một vấn đề thú vị đã tạo ra rất nhiều giải pháp thú vị. Tuy nhiên, toàn bộ mọi thứ đang bắt đầu kết thúc, bây giờ các giải pháp chính thức là:

  1. và những người bạn

  2. Giả sử chúng ta đang ở trên màn hình 1x. Bởi vì chúng tôi đã nói với trình duyệt rằng chúng tôi sẽ sử dụng những hình ảnh này lớn nhất có thể (100% khung nhìn), các "điểm ngắt" cho thời điểm trình duyệt lật ra, hình ảnh sẽ xảy ra ở 1280px, 640px, và 320px, có cùng kích thước chính xác như chúng tôi đã nói với hình ảnh.

    Nếu chúng ta đang ở trên màn hình 2x, những “điểm ngắt” đó sẽ giảm một nửa (bất kể chúng ta thực sự làm gì để kích thước những hình ảnh đó) và sẽ ở 640px, 320px và 160px.

    Bây giờ giả sử chúng ta sử dụng những hình ảnh giống nhau, nhưng chúng ta biết nhiều hơn về bố cục trang của mình và đã sử dụng một cái gì đó như thế này:

    Ở đây chúng tôi đang nói (với sizesthuộc tính), nếu khung nhìn là 500px hoặc nhỏ hơn, chúng tôi dự định hiển thị hình ảnh ở chiều rộng 250px. Nếu chế độ xem rộng hơn, hãy hiển thị hình ảnh ở chiều rộng 500px.

    Điều đó sẽ khớp với CSS như thế này:

    img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

    Trên màn hình 1x, bạn sẽ luôn nhận được hình ảnh 320w (nhỏ) khi chế độ xem rộng 500px hoặc nhỏ hơn và bạn sẽ luôn nhận được hình ảnh 640w (trung bình) khi chế độ xem lớn hơn. Bạn sẽ không bao giờ có được hình ảnh lớn, bởi vì nó có thể nói rằng bạn sẽ không bao giờ cần nhiều pixel như vậy.

    Với màn hình 2x, bạn sẽ luôn nhận được hình ảnh 640w (trung bình) khi chế độ xem rộng 500px hoặc nhỏ hơn (vì nó cho rằng nó cần 500px pixel và chế độ nhỏ không đủ ở 320px) và bạn sẽ luôn nhận được 1280w (lớn) hình ảnh khi khung nhìn lớn hơn. Bạn sẽ không bao giờ nhận được hình ảnh nhỏ, bởi vì nó không bao giờ đủ pixel để che những gì bạn đã nói với nó là bạn định hiển thị hình ảnh.

    Kích thước thực tế

    Hãy nhớ kích thước thực tế của hình ảnh vẫn tùy thuộc vào bạn. Tôi nghĩ trong phần lớn các trường hợp, đó là bạn làm điều đó thông qua CSS. Và CSS luôn thắng. Những gì bạn khai báo sẽ có chiều rộng được hiển thị của hình ảnh bất kể điều gì xảy ra với srcsetvà sizesnội dung. Điều đó chỉ tính ra hình ảnh nào sẽ được hiển thị.

    Đây là những gì làm cho thuộc tính kích thước hơi khó khăn. Giả sử bạn có một cái gì đó như:

    .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

    Điều đó không có gì lạ cả. Vì vậy, bây giờ bạn sử dụng kích thước nào trong sizesthuộc tính? Đó sẽ là 13,33% (nhân tất cả chúng với nhau) vì con số đó cần phải liên quan đến chế độ xem, không phải vùng chứa. Và điều đó không tính đến lợi nhuận và phần đệm và nội dung trên các thùng chứa đó, vì vậy đó là một phỏng đoán. Tôi đoán số lượng gần bằng móng ngựa, lựu đạn cầm tay và thuộc tính kích thước.

    Sau đó, giả sử một truy vấn phương tiện đi kèm và phần thân thực sự trở nên rộng 75% trên tất cả. Bạn cần biết điều đó để có thể điều chỉnh kích thước hiển thị của hình ảnh mà bạn nghĩ. Thuộc tính kích thước của bạn có thể trở thành:

    sizes="(min-width: 500px) 8%, 13.33%"

    Sau đó thực hiện lại điều đó cho mọi truy vấn phương tiện bố cục mà bạn có ảnh hưởng đến hình ảnh nội dung. Nó có thể hơi phức tạp.

    Kích thước thực tế?

    Tôi nghi ngờ hầu hết việc sử dụng trong thế giới thực sẽ sử dụng một cái gì đó như:

    Giả sử rằng hình ảnh nội dung sẽ có kích thước bằng một nửa kích thước của cửa sổ trình duyệt trên màn hình lớn và kích thước đầy đủ của cửa sổ trình duyệt trên màn hình nhỏ - chỉ cần để các điểm ngắt xảy ra ở nơi chúng xảy ra. Bạn sẽ vẫn có được một lựa chọn khá phù hợp theo cách này mà không cần phải đối sánh chính xác tất cả các truy vấn phương tiện của mình.

    Và hãy nhớ đây là những hình ảnh nội dung. HTML có xu hướng tồn tại lâu hơn CSS hoặc JS, đặc biệt khi nó là nội dung.

    Những điều khác cần biết

    Bạn cũng có thể chỉ định hình ảnh là 2x hay 1x bằng srcset. Vì vậy, một trường hợp sử dụng thực sự đơn giản có thể là:

    Điều đó một mình là khá hữu ích. Đừng trộn nó với việc chỉ định chiều rộng. Như Eric Portis nói:

    Và một lần nữa hãy để tôi nhấn mạnh rằng mặc dù bạn có thể đính kèm bộ mô tả độ phân giải 1x / 2x vào các nguồn srcsetthay vì bộ wmô tả, nhưng 1x / 2x & w không kết hợp. Không sử dụng cả hai trong cùng một srcset. Có thật không.

    Và hãy nhớ khi tôi nói việc điền hình ảnh ban đầu rất dễ dàng? Cái mới có thể dễ dàng như vậy, nhưng các yếu tố bên trong cũng hỗ trợ srcsetvà sizes. Điều đó có nghĩa là bạn có thể nhận được rất cụ thể. Nó thêm một lớp khác vào:

    1. Bạn quyết định cái nào

      Liên kết

      • Bài báo của Martin Wolf đã truyền cảm hứng cho điều này
      • Picturefill là polyfill bạn muốn sử dụng.
      • Bài viết trên Tạp chí Smashing trên Picturefill 2.0 của Tim Wright
      • Eric Portis về lý do tại sao Srcset và kích thước tồn tại và những gì nó giải quyết tốt hơn các truy vấn phương tiện
      • Eric Portis với nhiều thông tin mới về

      Xem thử nghiệm kích thước & srcset Bút của Chris Coyier (@chriscoyier) trên CodePen.