Hình ảnh mặc định html

Ngày của những trang web có chiều rộng cố định, pexel perfect thật sự đã ở phía sau chúng ta. Trong thời đại của màn hình rộng, internet TV, máy tính bảng và điện thoại thông minh có kích thước khác nhau, giờ đây thiết kế của chúng ta có để phục vụ cho tất cả mọi thứ từ chiều rộng 320px cho đến 7680px

Với nhiều mức độ phân giải khác nhau, điều này dẫn đến một nhu cầu cho các hình ảnh để giãn ra hoặc thu nhỏ để phù hợp với các yêu cầu chiều rộng khác nhau. Điều này có thể chứng minh rằng nó có vấn đề, bên ngoài hình ảnh véc tơ ra, hầu hết các hình ảnh có điểm ảnh cụ thể không thể thay đổi dựa trên chiều rộng

Vậy chúng ta làm gì?

Hiện tại, giải pháp phổ biến nhất

Thông thường, bạn sẽ thấy những điều sau đây trong CSS của các trang web có tính năng trả lời

1

img {

2

    max-width: 100%;

3

    height: auto;

4

}

Đoạn mã này sử dụng thiết lập

    height: auto;

9 để đảm bảo chắc chắn hình ảnh không bao giờ lớn hơn chiều rộng của phần tử chứa nó. Nếu phần tử cha thu nhỏ hơn chiều rộng của tấm hình, thì tấm hình cũng sẽ thay đổi kích thước theo nó. Thiết lập

4

0, chắc chắn về tỷ lệ hình ảnh được bảo đảm toàn bộ khi điều này xảy ra

One image change size for all fields

Nó giải quyết vấn đề đối với một khía cạnh, cho phép chúng ta hiển thị cùng một hình ảnh trong nhiều cảnh hoàn toàn khác nhau. Nhưng nó không cho phép chúng ta xác định các hình ảnh khác nhau cho những cảnh hoàn toàn khác nhau

Một giải pháp mới. height: auto; 8

    height: auto;

8 là một phần tử mới được thiết lập để trở thành một phần chính thức của HTML5

Nó sẽ mang lại quá trình đặt các hình ảnh có tính năng trả lời tương ứng như các phần tử 

4

3 và

4

4 đang làm. Nó sẽ cho phép bạn đặt nhiều thẻ

4

5, mỗi cái xác định tên tệp hình ảnh khác nhau cùng với các điều kiện theo đó chúng sẽ được tải

Nó sẽ cho phép bạn tải lên một hình ảnh hoàn toàn khác tùy thuộc vào

• Kết quả của Media Query, ví dụ chiều cao, chiều rộng, hướng của khung nhìn
• Image point mode

Điều này có nghĩa là bạn có thể

• Tải các hình ảnh có kích thước tương ứng, tối ưu hóa việc sử dụng băng thông
• Tải các hình ảnh với kích thước khác nhau để phù hợp với sự thay đổi của bố cục ở các độ rộng khác nhau
• Tải các hình ảnh có độ phân giải cao cho màn hình có điểm ảnh mật độ cao hơn

Các hình ảnh khác nhau, tùy thuộc vào hoàn cảnh

Phần tử height: auto; 8 hoạt động thế nào?

Các bước cơ bản để làm việc với

    height: auto;

8 là

1. Create the close tag and open

   4

   8
2. Trong các thẻ đó, tạo ra một phần tử

   4

   9 cho mỗi truy vấn bạn muốn chạy
3. Thêm một thuộc tính

   }
   

   0 có chứa các truy vấn của bạn về những thứ như chiều cao, chiều rộng, hướng của khung nhìn, v.v.
4. Thêm một thuộc tính

   }
   

   1 với tên tệp hình ảnh tương ứng để tải xuống
5. Thêm các tên tập tin phụ thuộc vào thuộc tính

   }
   

   1 của bạn nếu bạn muốn cung cấp cho các màn hình có mức độ mật mã điểm ảnh khác nhau, ví dụ như màn hình Retina
6. Thêm một phần tử

   }
   

   3 cho dự án

Dưới đây là một ví dụ cơ bản trong đó kiểm tra xem các khung nhìn nhỏ hơn 768px, thì sẽ tải xuống một hình ảnh nhỏ hơn

1

2

img {

1_______4_______

img {

3_______6_______1_______5

img {

6

img {

7

Bạn sẽ thấy rằng cú pháp sử dụng trong thuộc tính

}

0 giống như bạn có thể sử dụng để tạo Media Query trong CSS. Bạn có thể sử dụng các kiểm tra tương tự, có nghĩa là bạn có thể truy vấn

}

5, 

}

6, 

}

7, 

}

8, 

}

9 và vân vân

Bạn có thể sử dụng các kiểm tra này để thực hiện những công việc như tải các phiên bản ngang hoặc dọc của một tấm tùy chọn theo hướng xoay của thiết bị và bạn vẫn có thể kết hợp trong các truy vấn cùng kích thước cùng một lúc. Ví dụ

1

2

2

1

3

2

3_______6_______2_______5

img {

6

2

7

2

8

2

9

    max-width: 100%;

0

img {

7

Mã ở phiên bản tải xuống của hình ảnh nhỏ hơn, hướng nằm ngang trên một thiết bị nhỏ hơn và xoay ngang. Nó tải xuống 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ị xoay ngang

Nếu thiết bị nằm thẳng thì nó tải một bức ảnh đứng, kích thước nhỏ trên thiết bị nhỏ hoặc kích thước lớn trên thiết bị 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 cho màn hình có độ phân giải cao, thì bạn sẽ làm điều đó bằng cách thêm tên tệp phụ thuộc vào thuộc tính

}

1. Ví dụ, hãy xem đoạn mã đầu tiên của chúng ta ở trên với việc bổ sung thêm cho tốc độ phân giải 2x của màn hình Retina

1

2

    max-width: 100%;

5

3

    max-width: 100%;

7

4

3_______9

img {

6

img {

7

Truy vấn phương tiện vẫn được xem xét trước vì thế bạn có thể kiểm tra kích thước hình ảnh sẽ hiển thị trên màn hình. Sau đó, độ phân giải của màn hình sẽ được kiểm tra và nếu độ phân giải cao hơn được hỗ trợ thì phiên bản độ phân giải cao hơn của màn hình sẽ được tải

Sử dụng height: auto; 8 ngay hôm nay

Hiện tại, 

    height: auto;

8  hoạt động trong Chrome, Firefox và Opera. Trong tương lai có thể chúng ta sẽ thấy sự hỗ trợ sẽ trở nên phổ biến, rộng rãi hơn khi các trình duyệt khác cũng bắt đầu cài đặt. But current at, is not supports

Tuy nhiên, bạn không cần phải đợi nếu bạn muốn bắt đầu sử dụng

    height: auto;

8 ngay bây giờ. Bạn chỉ cần sử dụng Picturefill 2. 0;

Sau khi tải về picturefill tập tin. js vào dự án của bạn, nó có thể được cài đặt đơn giản bằng cách tải nó trong phần đầu của trang web của bạn

1

3

3

Cũng có tùy chọn để tải các tập lệnh không đồng bộ để tăng hiệu quả, bạn có thể đọc về nó trong hướng dẫn tài liệu của Picturefill

Với tập lệnh này được tải, thì phần tử

    height: auto;

8 sẽ hoạt động như tôi đã giải thích, chỉ với một vài hạn chế

Un mode of Picturefill

IE9

Picturefill hoạt động tốt với các phiên bản IE khác, tuy nhiên IE9 không nhận được phần tử

4

5 được đóng gói trong thẻ

1

6. Để giải quyết vấn đề này, hãy đặt các phần tử nguồn của bạn theo một cách có điều kiện trong các thẻ

1

7 để chúng có thể được nhìn thấy bởi IE9, ví dụ:

1

2

3

7

3

img {

1_______6_______1_______3

img {

6

    height: auto;

3

2

8

img {

5

    max-width: 100%;

0

img {

7

Android2. 3

Giống như IE9, Android 2. 3 could not see the other section of

4

5 in an section tử

1

6. Tuy nhiên, nó có thể hiểu được thuộc tính

}

1 khi sử dụng trên thẻ

1 thông thường. Hãy chắc chắn rằng luôn luôn bổ sung phần tử dự phòng

1 của bạn với tên tệp mặc định trong các thuộc tính

}

1 cho Android 2. 3 và bất kỳ trình duyệt nào khác gặp sự cố tương tự như trên

Yêu cầu JavaScript và Media Query

Là một giải pháp dựa trên JavaScript, nó đương nhiên yêu cầu JavaScript để được kích hoạt trong trình duyệt. Picturefill 2. 0 không cung cấp giải pháp "no-js" bởi vì nếu nó làm như vậy, nhiều hình ảnh sẽ xuất hiện khi trình duyệt hỗ trợ cho

    height: auto;

8. Tuy nhiên, bạn có thể chọn sử dụng Picturefill 1. 2 nếu "no-js" là điều kiện bắt buộc đối với bạn

Yêu cầu khác của Picturefill là Media Query hỗ trợ, để cho phép truy vấn thuộc tính

}

0. Tất cả các trình duyệt hiện đại đều hỗ trợ Media Query, chỉ có IE8 và thấp hơn là không hỗ trợ với lượng người dùng còn lại rất nhỏ

Phát sinh thêm các yêu cầu HTTP

Trong trình duyệt có hỗ trợ

}

1, nhưng không hỗ trợ

1

6, có thể tên tệp chỉ được xác định trong phần tử

1 dự kiến ​​phòng có thể được yêu cầu trước khi một hình ảnh phù hợp hơn từ các phần tử của

4

5 được xác nhận