Hình ảnh được nổi tiếng là một trong những thách thức Hầu hết các khía cạnh của thiết kế website đáp ứng. Hôm nay, hãy cùng thiết kế web tại Hải Phòng sẽ xem xét làm thế nào <ảnh> yếu tố, một giải pháp cho vấn đề của hình ảnh đáp ứng, có thể được sử dụng ngay bây giờ.
Thứ nhất, vấn đề
Những ngày của chiều rộng cố định, điểm ảnh hoàn hảo thiết kế trang web là tốt và thực sự đằng sau chúng tôi. Trong ngày hiện tại của màn hình màn ảnh rộng, TV internet, nhiều máy tính bảng có kích thước và điện thoại thông minh hiện nay thiết kế của chúng tôi có để phục vụ cho tất cả mọi thứ từ 320px rộng có khả năng lên đến cao như 7680px rộng.
Cùng với cảnh quan đa độ phân giải này có một nhu cầu cho hình ảnh để kéo dài hoặc thu nhỏ để phù hợp với yêu cầu ban đầu cực kỳ khác nhau. Điều này có thể chứng minh được một cái gì đó của một vấn đề Do đó, với ngoại lệ của đồ họa vector, phần lớn các hình ảnh có độ rộng pixel cụ thể dựa trên đó không thay đổi.
Vì vậy, chúng ta làm gì?
Các hiện tại, giải pháp thường gặp nhất
Theo quy luật chung, bạn sẽ tìm thấy những điều sau đây chỉ là về bất kỳ trang web CSS đáp ứng của:
img {
max-width: 100%;
chiều cao: tự động;
}
Mã này sử dụng max-width: 100%; đảm bảo hình ảnh thiết lập để không bao giờ vượt quá chiều rộng của thùng phụ huynh của họ. Nếu container phụ huynh co lại xuống đến chiều rộng của hình ảnh, hình ảnh sẽ thu hẹp quy mô cùng với nó. Chiều cao: auto; Đảm bảo thiết lập tỉ lệ của hình ảnh được lưu giữ như này XẢY RA.
Nó giải quyết vấn đề ở một khía cạnh, Cho phép chúng tôi để hiển thị cùng một hình ảnh dưới nhiều hoàn cảnh khác nhau. Nhưng nó không cho phép chúng ta xác định hình ảnh khác nhau cho các hoàn cảnh khác nhau.
Một giải pháp mới: <ảnh>
<Ảnh> là một yếu tố mới để trở thành tháng chín Đó là một phần của HTML5.
Nó sẽ mang lại quá trình cho hình ảnh Đổ lên để tăng tốc độ đáp ứng với cách làm việc hiện tại <audio> và <video> yếu tố làm việc. Nó sẽ cho phép bạn đặt nhiều từ khóa nguồn, mỗi tên tập tin hình ảnh khác nhau Xác định Cùng với các điều kiện theo đó họ có nên được nạp.
Nó sẽ cho phép bạn tải một hình ảnh Hoàn toàn khác nhau Tùy thuộc vào:
Phương tiện truyền thông truy vấn kết quả ví dụ chiều cao khung nhìn, chiều rộng, định hướng
mật độ điểm ảnh
Điều này lần lượt nghĩa là bạn có thể:
Tải hình ảnh cách thích hợp kích thước tập tin, làm cho việc sử dụng tốt nhất của băng thông có sẵn.
Tải hình ảnh cắt khác nhau với các tỉ lệ khác nhau để phù hợp với thay đổi bố trí ở độ rộng khác nhau.
Tải hình ảnh độ phân giải cao hơn cho mật độ điểm ảnh hiển thị cao hơn.
Như thế nào <ảnh> làm việc?
Các bước cơ bản của làm việc với <ảnh> là:
Tạo mở và đóng <ảnh> </ hình ảnh> thẻ.
Trong Những thẻ, tạo ra một <nguồn> yếu tố cho mỗi truy vấn mà bạn muốn chạy.
Thêm một thùng chứa thuộc tính môi trường có các truy vấn của bạn vào những thứ như chiều cao khung nhìn, chiều rộng, định hướng, vv
Thêm vào srcset thuộc tính tương ứng với tên tập tin hình ảnh để tải.
Thêm tên tập tin bổ sung cho thuộc tính srcset của bạn nếu bạn muốn để cung cấp cho mật độ điểm ảnh khác nhau, ví dụ: Màn hình Retina.
Thêm một yếu tố dự phòng <img>.
Dưới đây là một ví dụ cơ bản đó kiểm tra nếu khung nhìn nhỏ hơn 768px, sau đó nếu để tải một hình ảnh nhỏ hơn:
<Hình ảnh>
<Nguồn srcset = "smaller.jpg" phương tiện truyền thông = "(max-width: 768px)">
<Nguồn srcset = "default.jpg">
<Img srcset = "default.jpg" alt = "hình ảnh mặc định của tôi">
</ Picture>
Bạn sẽ nhận thấy đó cú pháp được sử dụng trong các thuộc tính phương tiện truyền thông cũng giống như bạn có thể được sử dụng để tạo ra các truy vấn từ phương tiện truyền thông CSS. Bạn có thể sử dụng kiểm tra tương tự, có nghĩa là bạn có thể truy vấn tối đa chiều rộng, min-chiều rộng, chiều cao tối đa, tối thiểu chiều cao, định hướng và như vậy.
Bạn có thể sử dụng trong kiểm tra gốc để làm những việc như phong cảnh hoặc chân dung tải các phiên bản của một hình ảnh Tùy thuộc vào thiết bị định hướng, và bạn vẫn có thể kết hợp trong các truy vấn kích thước cùng một lúc. Ví dụ:
<Hình ảnh>
<Nguồn srcset = "smaller_landscape.jpg" phương tiện truyền thông = "(max-width: 40em) và (định hướng phong cảnh)">
<Nguồn srcset = "smaller_portrait.jpg" phương tiện truyền thông = "(max-width: 40em) và (định hướng chân dung)">
<Nguồn srcset = "default_landscape.jpg" phương tiện truyền thông = "(min-width: 40em) và (định hướng phong cảnh)">
<Nguồn srcset = "default_portrait.jpg" phương tiện truyền thông = "(min-width: 40em) và (định hướng chân dung)">
<Img srcset = "default_landscape.jpg" alt = "hình ảnh mặc định của tôi">
</ Picture>
Đoạn mã trên tải một, cắt phiên bản nhỏ hơn của hình ảnh cảnh quan trên một thiết bị nhỏ hơn, định hướng phong cảnh. Nó tải một phiên bản lớn hơn của cùng một hình ảnh trên một thiết bị định hướng phong cảnh lớn hơn.
Nếu thiết bị được bức chân dung theo định hướng nó tải một bức chân dung cắt phiên bản, ở kích thước nhỏ trên một thiết bị nhỏ hoặc lớn trên một thiết bị kích thước lớn.
Nếu bạn muốn để cung cấp các phiên bản độ phân giải khác nhau của hình ảnh của bạn cho hiển thị mật độ cao hơn, bạn làm như vậy bằng cách thêm tên tập tin bổ sung cho các thuộc tính srcset. Ví dụ, chúng ta hãy nhìn vào đoạn đầu tiên của chúng tôi đang từ trên cao với xử lý 2x cho độ phân giải Retina thêm:
<Hình ảnh>
<Nguồn srcset = "smaller.jpg, 2x smaller_retina.jpg" phương tiện truyền thông = "(max-width: 768px)">
<Nguồn srcset = "default.jpg, 2x default_retina.jpg">
<Img srcset = "default.jpg, 2x default_retina.jpg" alt = "hình ảnh mặc định của tôi">
</ Picture>
Các truy vấn trung bình vẫn được đánh giá đầu tiên để bạn có thể kiểm soát các kích thước sẽ xuất hiện tại hình ảnh của bạn trên màn hình. Sau đó, mật độ điểm ảnh của màn hình sẽ được kiểm tra và nếu mật độ cao hơn Cả hai đều được hỗ trợ và cho phép theo sở thích của người sử dụng, mật độ cao hơn phiên bản của hình ảnh sẽ được nạp.
Sử dụng <ảnh> Hôm nay
Ngay bây giờ bản địa cho thực hiện <ảnh> là trong các công trình cho Chrome, Firefox và Opera. Trong tương lai nó có khả năng chúng ta sẽ thấy sự hỗ trợ rộng rãi các trình duyệt khác như cũng nắm bắt. Tuy nhiên, cho thời điểm này hỗ trợ đó vẫn chưa đến.
Trong khi đó, bạn don 't phải chờ đợi nếu bạn muốn bắt đầu sử dụng <ảnh> ngay bây giờ. Bạn có chỉ đơn giản là sử dụng Picturefill 2,0; được cung cấp bởi một polyfill Những folks thông minh atFilament Group.
Sau khi tải về tập tin để picturefill.js dự án của bạn nó có thể triệu bởi chỉ cần tải nó trong phần đầu trang web của bạn:
1
<script src = "picturefill.js"> </ script>
Ngoài ra còn có một tùy chọn để tải các kịch bản không đồng bộ cho hiệu quả bổ sung, mà bạn có thể đọc acerca trong tài liệu của Picturefill.
Với kịch bản này nạp, <ảnh> yếu tố sẽ làm việc như tôi đã Giải thích, với chỉ một vài hạn chế.
Hạn chế Picturefill
IE9
Picturefill làm việc tốt với các phiên bản IE khác, tuy nhiên nó không reckonise sourceelements IE9 hình ảnh đó được gói trong thẻ. Để làm được việc này, có điều kiện bọc thẻ trong các yếu tố video gốc Mà sau đó sẽ làm cho chúng hiển thị cho IE9, ví dụ:
<Hình ảnh>
<video style = "display: none"> - <[nếu IE 9]> <[endif] ->
<Nguồn srcset = "smaller.jpg" phương tiện truyền thông = "(max-width: 768px)">
<Nguồn srcset = "default.jpg">
<- [Nếu IE 9]> </ video> <[endif] ->
<Img srcset = "default.jpg" alt = "hình ảnh mặc định của tôi">
</ Picture>
Android 2.3
Cũng giống như IE9, các yếu tố nguồn Android 2.3 không thể nhìn thấy bên trong một yếu tố hình ảnh. Tuy nhiên, nó có thể Hiểu được srcset thuộc tính Khi sử dụng trên một cơ sở thẻ img thường xuyên. Hãy chắc chắn để luôn luôn bao gồm dự phòng yếu tố img của bạn với tên tập tin mặc định trong srcsetattribute cho Android 2.3 và bất kỳ trình duyệt khác đó có thể có cùng một vấn đề.
Yêu cầu JavaScript và Truyền thông Native Hỗ trợ kiếm
Với này là một giải pháp dựa trên JavaScript, nó cho phù hợp yêu cầu JavaScript để được kích hoạt trong trình duyệt. Picturefill 2.0 không Cung cấp một "không js" cách giải quyết Bởi vì nếu nó đã làm, sẽ xuất hiện khi nhiều hình ảnh hỗ trợ trình duyệt tự <ảnh> được tung ra. Tuy nhiên, bạn có tùy chọn để sử dụng Picturefill 1.2 nếu một lựa chọn "không js" là phải có cho bạn.
Các yêu cầu khác là dành cho bạn Picturefill hỗ trợ truy vấn phương tiện truyền thông bản địa, để cho phép các truy vấn trong các thuộc tính phương tiện truyền thông để làm việc. Tất cả các trình duyệt hiện đại hỗ trợ phương tiện truyền thông truy vấn, Với IE8 và thấp hơn là trình duyệt không hỗ trợ duy nhất còn lại với một cơ sở người dùng nhỏ.
Có thể yêu cầu HTTP tắm
Trong đó trình duyệt có hỗ trợ cho srcset, nhưng chưa cho hình ảnh, nó có thể là tên tập tin được chỉ định trong các yếu tố img dự phòng có thể là một tốt hơn yêu cầu trước khi hình ảnh phù hợp từ các nguồn được xác định là yếu tố.
Đây chỉ là một vấn đề mà thiet ke website o Hai Phong tạm thời và sẽ biến mất mười bản địa thực hiện hình ảnh được tung ra.
Đăng nhận xét