Thay đổi kích thước hình ảnh bootstrap

Barry Pollard là một nhà phát triển web bị ám ảnh bởi hiệu suất web. Anh ấy là tác giả của cuốn sách Manning “HTTP/2 In Action” và là một trong những người duy trì … Thông tin thêm về Barry ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

  • Thay đổi kích thước hình ảnh bootstrap
    Quảng cáo trên tạp chí Smashing

  • Thay đổi kích thước hình ảnh bootstrap
    Các mẫu thiết kế giao diện Đào tạo UX

  • Thay đổi kích thước hình ảnh bootstrap
    Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

  • Thay đổi kích thước hình ảnh bootstrap
    Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern
  • Thay đổi kích thước hình ảnh bootstrap
    Giao diện người dùng SmashingConf 2023

Nhờ một số thay đổi gần đây trong trình duyệt, giờ đây rất đáng để đặt các thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trên hình ảnh của bạn để tránh 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 cho hình ảnh của bạn để có hiệu suất tốt nhất nhằm cho phép trang được bố trí với không gian thích hợp cho hình ảnh, trước khi chính hình ảnh đó được tải xuống. Điều này giúp tránh 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 lường trong chỉ số Chuyển đổi bố cục tích lũy mới

Chà, một bí mật nhỏ, bẩn thỉu — không nổi tiếng bên ngoài những người ủng hộ hiệu suất web cốt lõi — đó là, cho đến gần đây, điều này thực sự không tạo ra sự khác biệt trong nhiều trường hợp, như chúng ta sẽ thấy bên dưới. Tuy nhiên, việc thêm các thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 vào mã đánh dấu

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 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 các trình duyệt web phổ biến nhất nhanh chóng áp dụng những thay đổi này

đề xuất đọc

Thuộc tính CSS

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

7 cung cấp cho bạn cách giải thích bố cục của bạn cho trình duyệt, do đó 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 bài viết liên quan →

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ “TypeScript trong 50 bài học”, hướng dẫn mới tuyệt vời của chúng tôi về TypeScript. Với các hướng dẫn chi tiết về mã, các ví dụ thực hành và các vấn đề phổ biến — tất cả được chia thành các bài học ngắn, dễ quản lý. Đối với những nhà phát triển biết đủ JavaScript để trở nên nguy hiểm

Chuyển đến mục lục ↬

Thay đổi kích thước hình ảnh bootstrap

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.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Quá trình này có thể hiển thị theo hai giai đoạn, đầu tiên là khi HTML được tải xuống và sau đó là giai đoạn thứ hai sau khi hình ảnh được tải xuống. Với đoạn 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ị có thể được tính toán

Thay đổi kích thước hình ảnh bootstrap
Thay đổi bố cục sau khi tải hình ảnh. (Xem trước lớn)

Sự thay đổi bố cục rất gây khó chịu cho người dùng, đặc biệt nếu bạn đã bắt đầu đọc bài báo và đột nhiên bạn bị chuyển hướ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 cho 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 có nhiều hình ảnh, điều này có thể gây tải trọng đáng kể cho thiết bị vào thời điểm mà thiết bị có thể có nhiều thứ tốt hơn để xử lý

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.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trong đánh dấu

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 để 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ư sau

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

Sau đó, quá trình kết xuất diễn ra như bên dưới, trong đó lượng không gian thích hợp được dành riêng cho hình ảnh khi hình ảnh xuất hiện và không có sự dịch chuyển chói tai của văn bản khi hình ảnh được tải xuống

Thay đổi kích thước hình ảnh bootstrap
Văn bản không được thay đổi nếu kích thước hình ảnh được cung cấp để có thể phân bổ không gian thích hợp. (Xem trước lớn)

Thậm chí bỏ qua tác động gây phiền nhiễu cho người dùng trong nội dung nhảy xung quanh (điều mà bạn không nên. ), tác động lên CPU cũng có thể khá lớn. Ảnh chụp màn hình bên dưới hiển thị các phép tính hiệu suất do Chrome thực hiện trên trang web tôi làm việc trên đó có thư viện khoảng 100 hình ảnh. Phía bên trái hiển thị các phép tính khi cung cấp

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 và phía bên phải khi không cung cấp

Thay đổi kích thước hình ảnh bootstrap
Tính toán hiệu suất có và không có thứ nguyên. (Xem trước lớn)

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 thấp hơn và tốc độ mạng chậm, nơi hình ảnh 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 và chiều cao của phần tử

Chiều rộng và chiều cao trên hình ảnh có thể gây ra sự cố 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 độ rộng nhất định, bạn có thể sử dụng CSS sau

img {
  max-width: 100%;
}

Điều này sẽ ghi đè

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 của hình ảnh và hạn chế nó khi cần thiết, nhưng nếu bạn đã đặt rõ ràng

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trên thẻ hình ảnh, thì chúng tôi sẽ không ghi đè giá trị đó (chỉ chiều rộng) và bạn sẽ nhận được một hình ảnh bị kéo dài hoặc bị nén.

Thay đổi kích thước hình ảnh bootstrap
Xung đột về kích thước hình ảnh giữa HTML và CSS có thể tạo ra các kích thước bị kéo dài (hoặc bị nén). ) hình ảnh. (Xem trước lớn)

Điều này thực sự rất dễ khắc phục bằng cách thêm một dòng

img {
  max-width: 100%;
}
5 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 vào đó. Không có kích thước hình ảnh, bạn có thể thoát khỏi việc chỉ cần chỉ định

img {
  max-width: 100%;
}
6 trong CSS mà không cần phải chỉ định
img {
  max-width: 100%;
}
5 và trình duyệt sẽ tự động tìm ra chiều cao — sau khi 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%;
}
5 đó, 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 (tôi đã - đó là lý do tại sao tôi quyết định viết bài báo này)

Ví dụ: lấy mã dưới đây


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

Điều này sẽ dẫn đến tải này

Thay đổi kích thước hình ảnh bootstrap
Thay đổi bố cục xảy ra khi sử dụng
img {
  max-width: 100%;
}
5 trong CSS. (Xem trước lớn)

Đợi đã, chuyện gì đang xảy ra ở đây vậy? . 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 sự cố thay đổi bố cục này?

Vấn đề là, trừ khi bạn đưa ra các giá trị CSS rõ ràng là

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 cho hình ảnh của mình — và ai muốn tự 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 nhỏ để lấp đầy không gian có sẵn — thì CSS sẽ . Nó bỏ qua mọi thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 được đặt trong HTML

Hàm ý của tất cả điều này là việc chỉ định các thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trên hình ảnh thường không thực sự hữu ích trong nhiều trường hợp. Có, khi một hình ảnh đang được hiển thị ở kích thước đầy đủ mà không có bất kỳ CSS nào thay đổi bất kỳ kích thước nào, sẽ rất hữu ích để giải quyết vấn đề thay đổi 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 vào dung lượng 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ôi. e. thiết bị di động màn hình nhỏ. Đây có thể là những người dùng đang gặp khó khăn với các hạn chế về mạng và sức mạnh xử lý hạn chế sẽ bị ảnh hưởng nhiều nhất khi thay đổi bố cục. Tất nhiên, lý tưởng nhất là chúng tôi nên phân phối hình ảnh có kích thước phù hợp với 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, hình ảnh thường sẽ cần trình duyệt thay đổi kích thước, đặ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.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trên thẻ

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 của họ. Đó có thể là do họ không biết điều này là hữu ích, hoặc bởi vì tất cả họ đều quá hiểu về những gì chúng ta nói ở đây và biết rằng nó thực sự không hữu ích trong nhiều trường hợp. Dù lý do là gì, chúng thường không được cung cấp. (Làm thế nào chúng ta thậm chí có thể truyền bá nỗ lực sử dụng chúng theo những gì tôi vừa mô tả?) Ngay cả công cụ kiểm toán Lighthouse phổ biến cũng không gắn cờ khi bạn không làm điều này (mặc dù trong một số điều chúng tôi

Làm việc xung quanh vấn đề

Các hạn chế đối với hình ảnh phản hồi đã được biết đến từ lâu và nhiều giải pháp thay thế, bao gồm cái gọi là tấn công đệm đáy, đã được tạo ra để khắc phục sự cố. Điều này sử dụng thực tế là tỷ lệ phần trăm


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

0 (bao gồm

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

1 ) luôn dựa trên chiều rộng vùng chứa (để đả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 vùng chứa trong đó chiều cao được đặt dựa trên tỷ lệ chiều rộng. Ví dụ: giả sử chúng ta có một hình ảnh có tỷ lệ khung hình là 16. 9, thì mã CSS sau 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

  1. Nó yêu cầu tính toán một tỷ lệ mã hóa cứng (
    
    

    Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    2 — 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
  2. Mã CSS không thực sự dễ nhớ — quên hoặc xóa một dòng mã CSS ở trên sẽ phá vỡ toàn bộ nội dung. Chưa kể kỹ thuật này yêu cầu tất cả các hình ảnh được bao bọc trong một phần tử vùng chứa bổ sung
  3. Đây là một kỹ thuật nâng cao hơn mà không phải nhà phát triển web nào cũng biết hoặc sử dụng

Và, thành thật mà nói - đó là một chút rắc rối. Vì vậy, chúng ta thực sự nên sửa lỗi này đúng cách, phải không?

Khắc phục sự cố thay đổi kích thước

Vấn đề đã được giải quyết từ một số 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 thuộc tính


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 mà Rachel đã viết trước đây. Điều này sẽ giải quyết vấn đề phức tạp (vấn đề 2) khi nó có sẵn và đơn giản hóa đoạn mã trên thành đ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 mà 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 đối với những hình ảnh có kích thước ít được chuẩn hóa hơn nhiều, vì nó không giải quyết được vấn đề 1 (yêu cầu mã CSS tùy chỉnh cho mỗi hình ảnh), cũng như vấn đề 3 (nhà phát triển trang web sẽ cần nhớ đặt vấn đề này). Vì vậy, đó là một bước tiến, nhưng không phải là một giải pháp đầy đủ

Ngoài vấn đề này, Nhóm Cộng đồng Vườn ươm 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 chúng có hoạt động trước khi chuẩn hóa chính thức hay không — cũng đã tạo một đề xuất để khắc phục điều này. Họ đã đề xuất thuộc tính


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

4, nó sẽ trông như thế này

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trên các phần tử

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 (ngay cả khi chúng không được sử dụng nhiều như chúng ta nên. ) vì vậy bất cứ điều gì mới, ngoài điều đó, sẽ bị ảnh hưởng bởi vấn đề áp dụng. Và đó là nơi (bây giờ dường như rõ ràng. ) câu trả lời tự trình bày

Jen Simmons đã đề xuất giải pháp đơn giản và tao nhã này mà cô ấy đã nghĩ ra, cùng với fantasai


Thay đổi kích thước hình ảnh bootstrap

Thay vì mã hóa cứng


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3, điều này sử dụng hàm CSS

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

9 để tạo tỷ lệ khung hình phù hợp dựa trên các thuộc tính hình ảnh

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 do HTML cung cấp. Hàm

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

9 đã xuất hiện được một thời gian, nhưng phạm vi rất hạn chế — nó là , nhưng không dành cho những thứ như

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3, đây là thứ cần thiết ở đây

Nếu


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

9 có thể được sử dụng cho các thuộc tính nổi tiếng

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 từ các phần tử
img {
  max-width: 100%;
  height: auto;
}
9, thì nó có thể được sử dụng để tự động tính toán

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 như trên. Điều này sẽ giải quyết vấn đề 1 (không cần đặt tỷ lệ khung hình được mã hóa cứng 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 (áp dụng

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ì kích thước hình ảnh chính xác có thể được tính toán mà không cần đợi hình ảnh tải xuống và do đó không cần thay đổi bố cục nội dung

  • Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    3 được đặt trên phần tử trong HTML
  • Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    2 được đặt trên phần tử trong HTML
  • Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    3 (hoặc

    Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    2) được đặt trong CSS — bao gồm cả việc sử dụng các giá trị phần trăm 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%;
    }
    5
  • Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    2 (hoặc

    Your title

    Introductory paragraph.

    Thay đổi kích thước hình ảnh bootstrap

    Lorem ipsum dolor sit amet, consectetur…

    3) được đặt thành
    img {
      max-width: 100%;
      height: auto;
    }
    2 trong CSS

Nếu bất kỳ một trong số này không được đặt, thì phép tính sẽ không thể thực hiện được và do đó sẽ thất bại và bị bỏ qua và phải đợi hình ảnh được tải xuống

Vì vậy, khi các trình duyệt hỗ trợ sử dụng HTML

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 để tính toán

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3, chúng tôi có thể giải quyết vấn đề của mình rất đơn giản mà không cần 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 là đã 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, nên đề xuất có một bước ngoặt nữa — nó có thể được thêm vào biểu định kiểu tác nhân 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 để hưởng lợi từ điều này

Biểu định kiểu tác nhân người dùng là nơi đặt các định nghĩa CSS mặc định (e. g. phần tử

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
2 mà phần tử
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
3 sử dụng), có thể bị CSS của riêng bạn ghi đè nếu bạn muốn. Bằng cách thêm một lớp lót

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 ở trên vào phần này, chúng tôi không cần thúc đẩy việc áp dụng — về cơ bản, chúng tôi tự động bật tính năng này 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 việc hàm


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

9 có quyền truy cập vào các thuộc tính HTML

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3, cũng như thuộc tính CSS

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 sắp được hoàn thành — cả hai điều này đều chưa xảy ra. Vì vậy, thay vào đó, để khắc phục dễ dàng hơn, các trình duyệt có thể triển khai logic tương đương nằm sâu trong mã hiển thị thay vì hiển thị nó qua biểu định kiểu tác nhân người dùng, nhưng hiệu quả là như nhau. Cách tiếp cận thực hiện thay thế này thậm chí còn

Firefox đã đi trước và thực hiện điều này như một thử nghiệm và sau đó bật nó theo mặc định cho Firefox 71. Khi đã được phát hành, thì trang web của bạn có thể sẽ nhanh hơn miễn phí — cảm ơn Mozilla. Có thể trong tương lai, họ sẽ chuyển phương thức này sang phương thức biểu định kiểu tác nhân người dùng, nhưng hiện tại, điều này là đủ (và có lẽ hiệu quả hơn?)

Khả năng tương thích ngược

Khi giới thiệu một thay đổi trong hành vi, luôn có mối lo ngại về khả năng tương thích ngược và tính năng này cũng không khác. Về lý thuyết, miễn là bốn thuộc tính được thiết lập phù hợp, sẽ không có sự cố với điều này

Tuy nhiên, khi Firefox lần đầu tiên thử nghiệm với nó, họ đã phát hiện ra vấn đề đối với những người đặt sai

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trong HTML của họ. Trong khi trước đây những giá trị không chính xác này sẽ bị bỏ qua nếu CSS ghi đè lên chúng, thì giờ đây, chúng đang được sử dụng khi đặt ____17_______2 và hình ảnh không được hiển thị chính xác và dẫn đến hình ảnh bị méo hoặc bị 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ó đã bị hỏng ngay cả khi không có thay đổi này (trường hợp ở trên khi bạn không đặt
img {
  max-width: 100%;
}
5), tuy nhiên, việc phá vỡ các trang web không bao giờ là một . Đó cũng là điều mà web rất cố gắng tránh — và hầu như rất giỏi trong việc tránh điều đó (đó là một trong những điều tôi thích nhất về web với tư cách là một nền tảng)

Tuy nhiên, giải pháp cho vấn đề đó tương đối đơn giản. có tỷ lệ khung hình hình ảnh thực tế của hình ảnh sẽ ghi đè lên bất kỳ tỷ lệ khung hình tính CSS nào. 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, vì vậy hình ảnh được hiển thị như trước đây. Điều này gây ra sự thay đổi bố cục (do không gian được phân bổ không chính xác 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 là tỷ lệ khung hình bằng 0

Triển khai cho các trình duyệt khác

Sau khi thử nghiệm thành công của Firefox, (một lần nữa sử dụng phương thức được mã hóa bố cục thay vì biểu định kiểu tác nhân người dùng mặc định) và triển khai nó 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 (ví dụ: Edge, Opera và Brave). Gần đây hơn, vào tháng 1 năm 2020, Apple đã thêm nó vào phiên bản Tech Preview của Safari, nghĩa là hy vọng nó sẽ sớm xuất hiện trên phiên bản sản xuất của Safari và cùng với đó, trình duyệt chính cuối cùng sẽ triển khai tính năng này và web sẽ

Hạn chế

Có một số hạn chế cần lưu ý với tính năng này, bao gồm các sự cố với

  • Chỉ đạo nghệ thuật
  • tải chậm
  • Không phải hình ảnh

Chỉ đạo nghệ thuật

Bản sửa lỗi hoạt động rất tốt để tính tỷ lệ khung hình dựa trên

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 cố định, nhưng còn khi những thay đổi đó thì sao?

Thay đổi kích thước hình ảnh bootstrap
'Chỉ đạo 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)

Trong trường hợp này, chúng tôi đang sử dụng hình ảnh rộng cho máy tính để bàn và sau đó là hình vuông, được cắt cho thiết bị di động. Hình ảnh phản hồi có thể được triển khai với phần tử

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

0

Hiện tại, điều này chỉ cho phép đặt

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 một lần trên phần tử chính, dự phòng

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 chứ không phải trên các phương án thay thế
Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 hoặc ít nhất một phần tử không có phần tử

Thay đổi kích thước hình ảnh bootstrap
1 (để ngăn trình duyệt tải xuống hình ảnh theo mặc định). Do đó, nó có thể không được hưởng lợi từ thay đổi gần đây này tùy thuộc vào cách trình duyệt của bạn xử lý phần tử được sử dụng hoặc các phần tử

Thay đổi kích thước hình ảnh bootstrap
1-less ________0____6. Mặc dù nếu phiên bản CSS của giải pháp này khả dụng, thì các nhà phát triển trang web sẽ có quyền kiểm soát tốt hơn đối với việc chỉ định chính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3

Tải chậm gốc đã được nhóm Chrome phát hành gần đây và nó có. 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ẽ sớm nhận được điều này và Safari hy vọng sẽ không quá muộn. Điều đó sử dụng phần tử

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 với một

Thay đổi kích thước hình ảnh bootstrap
1 với cú pháp như sau (bao gồm cả khi được sử dụng như một phần của phần tử

Thay đổi kích thước hình ảnh bootstrap
7)

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

1

Hoà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 lazy-load 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 đã nêu một lỗi về sự cố này và hy vọng nhóm Chrome sẽ sớm khắc phục sự cố này. (Cập nhật. Điều này đã được sửa trong Chrome 83. )

Không phải hình ảnh

Hiện tại, các trình duyệt đã thực hiện điều này, mới chỉ thực hiện đối với phần tử

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6, nhưng nó cũng sẽ hữu ích đối với các phần tử

Thay đổi kích thước hình ảnh bootstrap
9,

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

00 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

01, và điều này đang đượ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 có sẵn thông qua các hàm

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

9 và thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3, thì điều đó sẽ giúp nhà phát triển trang web có thể triển khai điều này cho bất kỳ yếu tố nào họ muốn

Cập nhật (Tháng 10. 2021). Kể từ đó, hỗ trợ CSS


Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 đã được thêm vào nhưng chưa có khả năng đặt những hỗ trợ này thông qua tham chiếu thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

05

Phần kết luận

Tôi thích những cải tiến chỉ hoạt động 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, điều đó không phải là bỏ qua công việc khó khăn mà các nhà phát triển trình duyệt và nhóm tiêu chuẩn hóa yêu cầu, nhưng nó thường được triển khai cho các trang web mới là khó khăn thực sự. Chúng ta có thể thêm càng ít xung đột để giới thiệu những cải tiến này thì càng có nhiều khả năng chúng sẽ được áp dụng và không có xung đột nào tốt hơn là không có gì cả. Khắc phục tác động của việc thay đổi bố cục đối với hình ảnh phản hồi của người dùng dường như là một trong những cải tiến như vậy và web sẽ tốt hơn cho điều đó

Một thay đổi được yêu cầu đối với các nhà phát triển web của chúng tôi là đảm bảo rằng chúng tôi đang cung cấp các thuộc tính

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 và

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

3 trong đánh dấu của mình. Đó là một thói quen mà chúng ta thực sự không nên bỏ, và nhiều CMS và công cụ xuất bản giúp việc này trở nên tương đối dễ dàng. Tôi đã truy vấn HTTPArchive và có vẻ như 62% trong số các thẻ

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

6 có

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

2 hoặc

Your title

Introductory paragraph.

Thay đổi kích thước hình ảnh bootstrap

Lorem ipsum dolor sit amet, consectetur…

10, thành thật mà nói, con số này cao hơn nhiều so với tôi mong đợi — nhưng hãy thử tăng số liệu thống kê đó lên nhiều hơn nữa khi chúng ta có lý do để làm lại. Vì vậy, tôi đề nghị bạn kiểm tra xem bạn có đang làm điều này trên trang web của mình không và nếu không, hãy 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à khiến họ hạnh phúc hơn, và ai lại không muốn điều đó?

Làm cách nào để đặt kích thước hình ảnh cố định trong Bootstrap?

Câu trả lời KHÁC là câu trả lời hay nhất, chỉ cần thêm class="img-responsive" vào thẻ img là được. tốt hơn từ chiều rộng. 100%; . 100%; . – Nabi K. A. Z.

Làm cách nào để thay đổi kích thước hình ảnh phản hồi trong Bootstrap?

Để làm cho hình ảnh phản hồi nhanh trong Bootstrap, hãy thêm một lớp. img đáp ứng với thẻ . Lớp này áp dụng chiều rộng tối đa. 100%; . tự động; .

Làm cách nào để làm cho hình ảnh vừa vặn trong Bootstrap?

Hình ảnh phản hồi tự động điều chỉnh để vừa với kích thước màn hình. Tạo hình ảnh phản hồi bằng cách thêm một. lớp phản hồi img với thẻ . Sau đó, hình ảnh sẽ được chia tỷ lệ độc đáo thành phần tử gốc.

Làm cách nào để đặt chiều cao và chiều rộng của hình ảnh trong Bootstrap 5?

Hình ảnh trong Bootstrap được phản hồi nhanh với. img-chất lỏng. Điều này áp dụng cho max-width. 100%; . auto; vào hình ảnh để nó chia tỷ lệ với phần tử gốc.