❮ Thẻ HTML
Thí dụ
Một hình ảnh có chiều cao 600 pixel và chiều rộng 500 pixel:
Hãy tự mình thử »
Thuộc tính
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 Chỉ định chiều rộng của hình ảnh, tính bằng pixel.Mẹo: Luôn chỉ định cả hai thuộc tính Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur…
3 và Your title
4 cho hình ảnh. Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho hình ảnh được đặt trước khi trang được tải. Tuy nhiên, nếu không có các thuộc tính này, trình duyệt không biết kích thước của hình ảnh và không thể đặt chỗ không gian thích hợp cho nó. Hiệu ứng sẽ là bố cục trang sẽ thay đổi trong khi tải [trong khi tải hình ảnh]. Always specify both the Your title
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 and Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
4 attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading [while the images load].Mẹo: Thu hẹp một hình ảnh lớn với các thuộc tính Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur…
5 và Your title
2 buộc người dùng phải tải xuống hình ảnh lớn [ngay cả khi nó trông nhỏ trên trang]. Để tránh điều này, hãy đặt lại hình ảnh với một chương trình trước khi sử dụng nó trên một trang. Downsizing a large image with the Your title
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
5
and Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 attributes forces a user to download the large image [even if it looks small on the page]. To avoid this, rescale the image with a program before using it on a page.Hỗ trợ trình duyệt
bề rộng | Đúng | Đúng | Đúng | Đúng | Đúng |
Cú pháp
Giá trị thuộc tính
điểm ảnh | Chiều rộng tính bằng pixel [ví dụ: width = "100"] |
❮ Thẻ HTML
- 18 phút đọc
- Trình duyệt, hiệu suất, tối ưu hóa, sức sống web cốt lõi
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 thuộc tính trên hình ảnh của bạn để ngăn chặn sự thay đổi bố cục và cải thiện trải nghiệm của khách truy cập trang web của bạn.Những người ủng hộ hiệu suất web thường khuyên nên thêm kích thước vào hình ảnh của bạn để có hiệu suất tốt nhất để cho phép trang được đặt ra với không gian phù hợp cho hình ảnh, trước khi chính hình ảnh được tải xuống. Điều này tránh được sự thay đổi bố cục khi hình ảnh được tải xuống - điều mà Chrome gần đây đã bắt đầu đo trong số liệu dịch chuyển bố cục tích lũy mới.
Chà, một điều bẩn thỉu, nhỏ bé, bí mật-không nổi tiếng bên ngoài những người ủng hộ hiệu suất web khó tính-là, cho đến gần đây, điều này thực sự đã tạo ra sự khác biệt trong rất nhiều trường hợp, như chúng ta sẽ thấy dưới đây. Tuy nhiên, việc thêm các thuộc tính
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 vào đánh dấu img {
max-width: 100%;
}
1 của bạn đã trở nên hữu ích trở lại sau một số thay đổi gần đây trong thế giới CSS và việc áp dụng nhanh những thay đổi này của các trình duyệt web phổ biến nhất.Đề xuất đọc
Thuộc tính CSS
img {
max-width: 100%;
}
2 cung cấp cho bạn một cách để giải thích bố cục của bạn cho trình duyệt, vì vậy có thể thực hiện tối ưu hóa hiệu suất. Tuy nhiên, nó đi kèm với một số tác dụng phụ về bố cục của bạn. Đọc một bài viết liên quan & nbsp; →Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓
Tại sao thêm chiều rộng và chiều cao là lời khuyên tốt
Lấy ví dụ trang đơn giản này:
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Điều này có thể hiển thị trong hai giai đoạn, đầu tiên là HTML được tải xuống, và sau đó thứ hai sau khi hình ảnh được tải xuống. Với mã trên, điều này sẽ khiến nội dung chính nhảy xuống sau khi hình ảnh được tải xuống và không gian cần thiết để hiển thị nó có thể được tính toán:
Các ca làm việc bố trí rất phá vỡ người dùng, đặc biệt nếu bạn đã bắt đầu đọc bài viết và đột nhiên bạn bị ném ra bởi một chuyển động, và bạn phải tìm lại vị trí của mình. Điều này cũng đặt thêm công việc trên trình duyệt để tính toán lại bố cục trang khi mỗi hình ảnh xuất hiện trên internet. Trên một trang phức tạp với rất nhiều hình ảnh, điều này có thể đặt một tải đáng kể trên thiết bị vào thời điểm mà nó có thể có rất nhiều điều tốt hơn để giải quyết!
Cách truyền thống để tránh điều này là cung cấp các thuộc tính
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trong đánh dấu img {
max-width: 100%;
}
1 vì vậy ngay cả khi trình duyệt chỉ có HTML, nó vẫn có thể phân bổ lượng không gian thích hợp. Vì vậy, nếu chúng ta thay đổi ví dụ ở trên thành những điều sau:Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
Sau đó, kết xuất xảy ra như bên dưới, trong đó lượng không gian thích hợp được đặt sang một bên cho hình ảnh khi nó đến và không có sự thay đổi chói tai của văn bản khi hình ảnh được tải xuống:
Ngay cả việc bỏ qua tác động khó chịu đối với người dùng trong việc nhảy nội dung xung quanh [mà bạn không nên làm!], Tác động đối với CPU cũng có thể khá đáng kể. Ảnh chụp màn hình dưới đây cho thấy các tính toán hiệu suất được thực hiện bởi Chrome trên một trang web tôi làm việc trên đó có một bộ sưu tập khoảng 100 hình ảnh. Phía bên trái cho thấy các tính toán khi
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 được cung cấp, và bên phải khi chúng không.Như bạn có thể thấy, tác động là đáng kể-đặc biệt là trên các thiết bị cấp dưới và tốc độ mạng chậm, nơi hình ảnh đang xuất hiện riêng biệt. Điều này làm tăng thời gian tải lên một lượng đáng chú ý.
Cách CSS tương tác với chiều rộng phần tử và độ cao
Chiều rộng và độ cao trên hình ảnh có thể gây ra vấn đề khi bạn cố gắng thay đổi chúng bằng CSS. Ví dụ: nếu bạn muốn giới hạn hình ảnh của mình ở một chiều rộng nhất định, bạn có thể sử dụng các CSS sau:
img {
max-width: 100%;
}
Điều này sẽ ghi đè lên
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 của hình ảnh và ràng buộc nó khi cần thiết, nhưng nếu bạn đã đặt rõ ràng Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trên thẻ hình ảnh, thì chúng tôi không ghi đè lên điều đó [chỉ có chiều rộng] và bạn sẽ kết thúc với một hình ảnh kéo dài hoặc bị đè bẹp, Vì chúng tôi không còn duy trì tỷ lệ khung hình của hình ảnh:Điều này thực sự rất dễ dàng được sửa chữa bằng cách thêm dòng
img {
max-width: 100%;
height: auto;
}
0 vào CSS để thuộc tính chiều cao từ HTML cũng bị ghi đè:img {
max-width: 100%;
height: auto;
}
Tuy nhiên, tôi thấy nó vẫn khiến mọi người ngạc nhiên và đôi khi dẫn đến việc họ không chỉ định kích thước hình ảnh trong HTML thay thế. Không có kích thước hình ảnh, bạn có thể thoát khỏi chỉ cần chỉ định
img {
max-width: 100%;
height: auto;
}
1 trong CSS mà không phải chỉ định img {
max-width: 100%;
height: auto;
}
0 và trình duyệt sẽ tự động tìm ra chiều cao - một khi nó có hình ảnh.Vì vậy, một khi chúng ta thêm các kích thước và thủ thuật
img {
max-width: 100%;
height: auto;
}
0, chúng ta sẽ có được điều tốt nhất của cả hai thế giới, phải không? Không có sự thay đổi bố cục, nhưng cũng có khả năng thay đổi kích thước hình ảnh bằng CSS? Cho đến gần đây, bạn có thể đã ngạc nhiên khi tìm hiểu câu trả lời trên thực tế: không [tôi là - do đó tại sao tôi quyết định viết bài viết này].Ví dụ: lấy mã bên dưới:
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
Điều này sẽ dẫn đến tải trọng này:
img {
max-width: 100%;
height: auto;
}
0 được sử dụng trong CSS. [Xem trước lớn]Đợi đã, những gì xảy ra ở đây? Chúng tôi trở lại vấn đề đầu tiên. Tôi nghĩ rằng tôi đã nói rằng bằng cách chỉ định kích thước hình ảnh trong HTML, bạn có thể tránh được vấn đề thay đổi bố cục này? Chà, đây là nơi nó trở nên thú vị và sẽ dẫn đến điểm chính của bài viết này.
Vấn đề là, trừ khi bạn đang đưa ra các giá trị rõ ràng
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 CSS cho hình ảnh của mình - và ai muốn giới hạn bản thân như thế trong một thế giới đáp ứng nơi bạn muốn hình ảnh mở rộng hoặc thu hẹp để lấp đầy không gian có sẵn - sau đó CSS sẽ Cần các kích thước từ chính tệp hình ảnh để tìm ra phần img {
max-width: 100%;
height: auto;
}
7 của kích thước. Nó đã bỏ qua bất kỳ thuộc tính Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 được đặt trong HTML.Hàm ý của tất cả điều này là chỉ định các thuộc tính
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trên hình ảnh thường không thực sự hữu ích trong rất nhiều trường hợp. Có, khi một hình ảnh được hiển thị ở kích thước đầy đủ, không có bất kỳ CS nào thay đổi bất kỳ kích thước nào, rất hữu ích khi giải quyết vấn đề dịch chuyển bố cục. Tuy nhiên, khi bạn sử dụng CSS như bên dưới để đảm bảo hình ảnh không tràn ra không gian có sẵn của chúng, thì bạn sẽ gặp sự cố ngay khi chiều rộng có sẵn trở nên nhỏ hơn kích thước hình ảnh thực tế.img {
max-width: 100%;
height: auto;
}
Điều này ảnh hưởng đến bất kỳ trang nào mà chúng tôi hạn chế kích thước hình ảnh theo cách phản hồi - tức là các thiết bị di động màn hình nhỏ. Đây có thể là chính người dùng phải chịu đựng các ràng buộc mạng và sức mạnh xử lý hạn chế sẽ chịu nhiều nhất từ các ca làm việc! Tất nhiên, chúng tôi lý tưởng nên cung cấp hình ảnh có kích thước phù hợp cho kích thước màn hình, nhưng bạn không thể bao gồm mọi kích thước thiết bị, vì vậy thường thì hình ảnh sẽ cần một số thay đổi kích thước của trình duyệt, đặc biệt là trên thiết bị di động.
Nhiều trang web có thể không bận tâm chỉ định
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2S và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trên thẻ img {
max-width: 100%;
}
1 của họ. Đó có thể là do họ không biết điều này rất hữu ích, hoặc vì tất cả họ đều nhận thức được những gì chúng ta đã nói ở đây và biết rằng nó thực sự là hữu ích trong rất nhiều trường hợp. Dù lý do là gì bên cạnh điểm, chúng thường không được cung cấp. . sắp nói về, đó đang được thảo luận một lần nữa].Làm việc xung quanh vấn đề
Những hạn chế cho các hình ảnh phản hồi đã được biết đến trong một thời gian dài và nhiều cách giải quyết, bao gồm cả cái gọi là hack đáy đệm, đã được tạo ra để giải quyết vấn đề. Điều này sử dụng thực tế là
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
5 tỷ lệ phần trăm [bao gồm
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
6] luôn dựa trên chiều rộng của container [để đảm bảo phần đệm nhất quán ngay cả khi chiều cao và chiều rộng khác nhau]. Do đó, thực tế này có thể được sử dụng để tạo một thùng chứa với nơi chiều cao được đặt dựa trên tỷ lệ chiều rộng. Ví dụ, hãy để nói rằng chúng tôi có một hình ảnh có tỷ lệ khung hình là 16: 9, thì mã CSS sau đây sẽ tạo không gian có kích thước phù hợp cho hình ảnh:.img-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Ba nhược điểm chính của kỹ thuật này là như sau:
- Nó đòi hỏi một tỷ lệ mã hóa cứng phải được tính toán [
7-9 16-trong ví dụ này], do đó, nó có khả năng yêu cầu CSS tùy chỉnh cho mỗi hình ảnh khác nhau.img { max-width: 100%; height: auto; }
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
- Mã CSS không thực sự dễ nhớ - quên hoặc xóa một dòng duy nhất của mã CSS ở trên sẽ phá vỡ toàn bộ. Chưa kể kỹ thuật này đòi hỏi tất cả các hình ảnh phải được bọc trong một phần tử container bổ sung.
- Đây là một kỹ thuật tiên tiến hơn mà không phải tất cả các nhà phát triển web đều biết hoặc sử dụng.
Và, hãy để thành thật - đó là một chút hack! Vì vậy, chúng ta thực sự nên sửa chữa điều này đúng cách, có nên không?
Khắc phục vấn đề thay đổi kích thước
Vấn đề đã được giải quyết từ một vài hướng khác nhau bởi một số tổ chức tiêu chuẩn khác nhau.
Nhóm làm việc CSS [CSS WG] đã đề xuất tài sản
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8 mà Rachel đã viết trước đó. Điều này sẽ giải quyết vấn đề phức tạp [vấn đề 2] một khi nó có sẵn và đơn giản hóa mã trên chỉ là điều này:img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
Đẹp hơn nhiều! Điều này đặc biệt hữu ích cho video trong đó chúng tôi thường có một số tỷ lệ khung hình thường được sử dụng, vì vậy chúng tôi có thể tạo một vài lớp như ở trên cho mỗi kích thước. Nó có lẽ ít hữu ích hơn cho các hình ảnh trong đó kích thước ít được chuẩn hóa hơn nhiều, vì nó không giải quyết vấn đề 1 [mã CSS tùy chỉnh được yêu cầu cho mỗi hình ảnh], cũng như vấn đề 3 [các nhà phát triển trang web sẽ cần nhớ để đặt điều này]. Vì vậy, nó là một bước tiến, nhưng không phải là một giải pháp đầy đủ.
Tách biệt với điều này, Nhóm cộng đồng ươm tạo web [WICG] - một nhóm các nhà phát triển trình duyệt và các bên quan tâm khác có thể thử nghiệm các công nghệ để xem liệu họ có làm việc trước khi tiêu chuẩn hóa chính thức hay không - cũng tạo ra đề xuất khắc phục điều này. Họ đã đề xuất thuộc tính
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
9, trông như thế này:
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trên img {
max-width: 100%;
}
1 [ngay cả khi chúng không được sử dụng nhiều như chúng nên . Và đó là nơi mà câu trả lời [dường như bây giờ rõ ràng!] Đã trình bày chính nó.Jen Simmons đã đề xuất giải pháp thanh lịch và đơn giản này mà cô đã đưa ra, cùng với Fantasai:
img {
width: 100%;
height: auto;
aspect-ratio: attr[width] / attr[height];
}
Thay vì mã hóa cứng
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8, điều này sử dụng hàm img {
max-width: 100%;
height: auto;
}
4 CSS để tạo tỷ lệ khía cạnh phù hợp dựa trên hình ảnh Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 được cung cấp bởi HTML. Hàm img {
max-width: 100%;
height: auto;
}
4 đã xuất hiện trong một thời gian, nhưng đã bị giới hạn trong phạm vi - nó được hỗ trợ cho img {
max-width: 100%;
height: auto;
}
8 bởi tất cả các trình duyệt, nhưng không phải là trường hợp sử dụng rộng hơn của bất kỳ thuộc tính nào khác như Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3, đó là những gì cần thiết ở đây.Nếu
img {
max-width: 100%;
height: auto;
}
4 có thể được sử dụng cho các thuộc tính Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 nổi tiếng từ các phần tử .img-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
4, thì nó có thể sử dụng được sử dụng để tự động tính toán
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8 như trên. Điều này sẽ giải quyết vấn đề 1 [không có tỷ lệ khung hình cứng nào cần được đặt trong HTML cũng như CSS], vấn đề 2 [rất đơn giản để thêm] và, như chúng ta sẽ thấy, có một câu trả lời rất đơn giản cho vấn đề 3 [nhận con nuôi ].Về cơ bản, giải pháp này có nghĩa là nếu bốn điều kiện sau là đúng, thì có thể tính toán kích thước hình ảnh chính xác mà không cần phải chờ hình ảnh tải xuống, và vì vậy mà không cần sự thay đổi bố cục nội dung:
3 được đặt trên phần tử trong HTMLYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 được đặt trên phần tử trong HTMLYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 [hoặcYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2] được đặt trong CSS - bao gồm sử dụng các giá trị phần trăm nhưYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
0img { width: 100%; height: auto; aspect-ratio: 16/9; }
2 [hoặcYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3] được đặt thànhYour title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
7 trong CSS.img { max-width: 100%; height: auto; }
Nếu bất kỳ một trong số này không được thiết lập, thì tính toán sẽ không thể thực hiện được, và do đó sẽ thất bại và bị bỏ qua và phải chờ hình ảnh được tải xuống.
Vì vậy, một khi các trình duyệt hỗ trợ bằng cách sử dụng HTML
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 để tính toán
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8, chúng tôi có thể giải quyết vấn đề của mình rất đơn giản mà không thay đổi trong thực tế đối với HTML và một dòng mã CSS! Như đã đề cập ở trên, đây cũng là điều mà nhiều nhà phát triển web có thể đã cho rằng dù sao cũng đã xảy ra.Thúc đẩy việc áp dụng giải pháp này
Bởi vì đây chỉ là một thuộc tính CSS, đề xuất này có một sự thay đổi hơn nữa-nó có thể được thêm vào bảng tạo kiểu người dùng được sử dụng bởi các trình duyệt, do đó thậm chí sẽ không yêu cầu bất kỳ thay đổi nào từ các nhà phát triển web để được hưởng lợi từ việc này.
Biểu đồ kiểu người dùng là nơi các định nghĩa CSS mặc định được đặt [ví dụ: phần tử
img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
7 sử dụng phần tử img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
8], có thể được ghi đè bởi CSS của chính bạn nếu bạn muốn. Bằng cách thêm một lớp
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8 ở trên vào điều này, chúng tôi không cần phải áp dụng việc áp dụng-về cơ bản chúng tôi sẽ tự động bật nó cho tất cả các trang web đáp ứng bốn điều kiện trên!Tuy nhiên, điều này phụ thuộc vào chức năng
img {
max-width: 100%;
height: auto;
}
4 có quyền truy cập vào các thuộc tính Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 HTML, và cũng là thuộc tính
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8 CSS sắp tới được hoàn thành - chưa xảy ra. Vì vậy, thay vào đó, như một bản sửa lỗi dễ dàng hơn, các trình duyệt có thể thực hiện logic tương đương sâu trong mã kết xuất thay vì hiển thị nó thông qua bảng kiểu của tác nhân người dùng, nhưng hiệu ứng là như nhau. Cách tiếp cận thực hiện thay thế này thậm chí còn được đề xuất như là một phần của đề xuất.Firefox đã đi trước và làm điều này như một thử nghiệm và sau đó bật nó theo mặc định cho Firefox 71. Sau khi được phát hành, thì trang web của bạn có thể đã nhanh hơn miễn phí - cảm ơn Mozilla! Có thể trong tương lai, họ sẽ chuyển điều này sang phương thức biểu định kiểu người dùng, nhưng bây giờ, điều này là đủ [và có lẽ là hiệu suất hơn?].
Khả năng tương thích ngược
Khi giới thiệu một sự thay đổi trong hành vi, luôn có một mối quan tâm về khả năng tương thích ngược và tính năng này không khác. Về lý thuyết, miễn là bốn thuộc tính được thiết lập một cách thích hợp, sẽ không có sự phá vỡ với điều này.
Tuy nhiên, khi Firefox ban đầu thử nghiệm nó, họ đã phát hiện ra các vấn đề cho những người đặt
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 không chính xác trong HTML của họ. Trong khi trước đây các giá trị không chính xác này sẽ bị bỏ qua nếu CSS vượt qua chúng, thì bây giờ chúng đã được sử dụng khi img {
max-width: 100%;
height: auto;
}
7 được đặt và hình ảnh không được hiển thị chính xác và dẫn đến hình ảnh bị vắt hoặc kéo dài. Bây giờ bạn có thể lập luận rằng các nhà phát triển web không nên đặt các giá trị này không chính xác và trong một số trường hợp, nó sẽ bị phá vỡ ngay cả khi không có sự thay đổi này [trường hợp ở trên khi bạn không đặt điều tốt. Đó cũng là điều mà web cố gắng rất khó tránh - và chủ yếu là rất giỏi trong việc tránh điều đó [nó là một trong những điều yêu thích của tôi về web như một nền tảng].Tuy nhiên, giải pháp cho vấn đề đó là tương đối đơn giản: có tỷ lệ hình ảnh thực tế của hình ảnh của hình ảnh ghi đè lên bất kỳ tỷ lệ khía cạnh nào tính toán CSS. Bằng cách này, tỷ lệ khung hình được tính toán [không chính xác] có thể được sử dụng cho bố cục ban đầu, nhưng sau đó có thể được tính toán lại khi hình ảnh được tải xuống, do đó hình ảnh được hiển thị như trước đây. Điều này gây ra sự thay đổi bố cục [vì không gian không chính xác được phân bổ ban đầu] nhưng điều đó đã xảy ra trước đó, vì vậy nó không tệ hơn. Trên thực tế, nó thường tốt hơn rất nhiều vì tỷ lệ khung hình không chính xác thường sẽ gần với sự thật hơn so với tỷ lệ khung hình không.
Triển khai các trình duyệt khác
Sau khi thử nghiệm thành công của Firefox, Chrome cũng quyết định thực hiện điều này [một lần nữa sử dụng phương thức được mã hóa bố cục ngay bây giờ thay vì bảng kiểu người dùng mặc định] và tung nó ra theo mặc định trong Chrome 79. Điều này cũng quan tâm đến các trình duyệt dựa trên crom khác khác [Edge, opera và dũng cảm, ví dụ]. Gần đây, vào tháng 1 năm 2020, Apple đã thêm nó vào phiên bản xem trước công nghệ của họ của Safari, có nghĩa là hy vọng sẽ sớm đến phiên bản sản xuất của Safari, và với điều đó, phần cuối cùng của các trình duyệt chính sẽ thực hiện điều này và Web sẽ Trở nên tốt hơn và ít jolty hơn cho một số lượng lớn các trang web.
Giới hạn
Có một vài hạn chế cần biết với tính năng này, bao gồm các vấn đề với:
- Định hướng nghệ thuật
- Tải lười biếng
- Non-Images
Định hướng nghệ thuật
Tải lười biếng
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 cố định, nhưng khi đó khi những người đó thay đổi thì sao? Điều này được gọi là hướng nghệ thuật và một ví dụ được hiển thị dưới đây:'Hướng nghệ thuật' sử dụng các bức ảnh khác nhau tùy thuộc vào không gian có sẵn. [Xem trước lớn]
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
0Trong trường hợp này, chúng tôi đang sử dụng một hình ảnh rộng cho máy tính để bàn, và sau đó là hình ảnh hình vuông, được cắt cho thiết bị di động. Hình ảnh đáp ứng có thể được thực hiện với phần tử
img {
width: 100%;
height: auto;
aspect-ratio: attr[width] / attr[height];
}
0 như thế này:Hiện tại, điều này chỉ cho phép Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur…
2 và Your title
3 được đặt một lần trên phần tử chính, dự phòng Your title
1 chứ không phải trên các lựa chọn thay thế img {
max-width: 100%;
}
4 riêng lẻ. Thêm những điều này đã được đề xuất nhưng cho đến lúc đó, đây hiện là một hạn chế của giải pháp và sử dụng hình ảnh với các kích thước khác nhau vẫn sẽ trải qua một sự thay đổi bố cục.: This was added in Chrome 90.
img {
width: 100%;
height: auto;
aspect-ratio: attr[width] / attr[height];
}
Tải lười biếng
Việc sửa chữa hoạt động tuyệt vời để tính toán tỷ lệ khía cạnh dựa trên
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 cố định, nhưng khi đó khi những người đó thay đổi thì sao? Điều này được gọi là hướng nghệ thuật và một ví dụ được hiển thị dưới đây:'Hướng nghệ thuật' sử dụng các bức ảnh khác nhau tùy thuộc vào không gian có sẵn. [Xem trước lớn]
Tải Lazy bản địa gần đây đã được phát hành bởi nhóm Chrome và nó đã được thêm vào thông số HTML. Các trình duyệt khác cũng đang tìm cách hỗ trợ điều này với Firefox cũng sớm nhận được điều này, và Safari hy vọng không quá muộn. Điều đó sử dụng phần tử
img {
max-width: 100%;
}
1 với
img {
width: 100%;
height: auto;
aspect-ratio: attr[width] / attr[height];
}
6 có cú pháp như sau [bao gồm cả khi được sử dụng như một phần của phần tử Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
02]:Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
1Hoàn hảo! Thật không may, tôi đã phát hiện ra giải pháp chiều cao và chiều rộng này không tương thích với chức năng tải Lazy gốc được phát hành gần đây như có thể thấy trên trang thử nghiệm này. Tôi đã đặt một lỗi cho vấn đề này và hy vọng nhóm Chrome sẽ sớm sửa chữa điều này. [Cập nhật: Điều này đã được sửa trong Chrome 83.]Update: This was fixed in Chrome 83.]
Non-Images
Hiện tại, các trình duyệt đã thực hiện điều này, chỉ được thực hiện cho yếu tố
img {
max-width: 100%;
}
1, nhưng nó cũng sẽ hữu ích cho các phần tử Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
04, Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
05 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
06 để đặt tên cho một số, và điều này được thảo luận. Một lần nữa, nếu phiên bản CSS của kỹ thuật này sẽ có sẵn thông qua các chức năng img {
max-width: 100%;
height: auto;
}
4 và thuộc tính
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8, thì điều đó sẽ đặt sức mạnh trong nhà phát triển trang web để thực hiện điều này cho bất kỳ yếu tố nào họ muốn!Cập nhật [tháng 10 năm 2021]: Hỗ trợ CSS Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur…
8 đã được thêm vào trong Chrome 88, Firefox 89 và Safari 15 nhưng chưa có khả năng đặt các tài liệu tham khảo thuộc tính
img {
max-width: 100%;
height: auto;
}
Your title
10 này.: CSS Your title
img {
max-width: 100%;
height: auto;
}
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
8 support was since added in
Chrome 88, FireFox 89 and Safari 15 but not yet with the ability to set these via Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
10 attribute references.Sự kết luận
Tôi thích những cải tiến chỉ làm việc mà không cần bất kỳ nỗ lực nào của chủ sở hữu trang web. Tất nhiên, đó không phải là bỏ qua công việc khó khăn mà các nhà phát triển và nhóm tiêu chuẩn hóa của trình duyệt yêu cầu, nhưng nó thường được triển khai đến các trang web là khó khăn thực sự. Càng ít ma sát chúng ta có thể thêm vào để giới thiệu những cải tiến này, chúng càng có khả năng được áp dụng, và ở đó, không có ma sát nào tốt hơn không có gì cả! Khắc phục tác động của việc thay đổi bố cục đối với người dùng đối với hình ảnh phản hồi dường như là một trong những cải tiến như vậy và web là tốt hơn cho nó.
Một thay đổi được yêu cầu của các nhà phát triển web Hoa Kỳ là để đảm bảo chúng tôi đang cung cấp các thuộc tính
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 và Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
3 trong đánh dấu của chúng tôi. Đó là một thói quen mà chúng ta không nên thực sự thoát ra, và nhiều CMS và các công cụ xuất bản làm cho điều này tương đối dễ dàng. Tôi đã yêu cầu HTTPARCHIVE và có vẻ như 62% thẻ img {
max-width: 100%;
}
1 có Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
2 hoặc Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
15, cao hơn tôi mong đợi - nhưng hãy để cố gắng tăng số liệu thống kê đó nhiều hơn bây giờ chúng ta có một lý do để lại. Vì vậy, tôi cầu xin bạn kiểm tra xem bạn đang làm điều này trên các trang web của bạn và, nếu không, bắt đầu. Nó sẽ cải thiện trải nghiệm cho người dùng của bạn và cuối cùng làm cho họ hạnh phúc hơn, và ai không muốn điều đó?