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 ↬ Show
Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về front-end & UX
Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… Introductory paragraph. Lorem ipsum dolor sit amet, consectetur… 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 2 và 3 vào mã đánh dấu 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 đọcThuộc tính CSS 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 ↬Tại sao thêm chiều rộng và chiều cao là lời khuyên tốtLấy ví dụ trang đơn giản này
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 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 2 và 3 trong đánh dấu 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
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 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 2 và 3 và phía bên phải khi không cung cấpTí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
Điều này sẽ ghi đè 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 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. 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 5 vào CSS để thuộc tính chiều cao từ HTML cũng bị ghi đè
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 6 trong CSS mà không cần phải chỉ định 5 và trình duyệt sẽ tự động tìm ra chiều cao — sau khi có hình ảnhVì vậy, một khi chúng ta thêm các kích thước và thủ thuật 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
Điều này sẽ dẫn đến tải này Thay đổi bố cục xảy ra khi sử dụng 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à 2 và 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 2 và 3 được đặt trong HTMLHàm ý của tất cả điều này là việc chỉ định các thuộc tính 2 và 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ế
Đ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 2 và 3 trên thẻ 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 0 (bao gồm 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
Ba nhược điểm chính của kỹ thuật này là như sau
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ướcVấ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 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
Đẹ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 4, nó sẽ trông như thế này 2 và 3 trên các phần tử 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àyJen 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 vì mã hóa cứng 3, điều này sử dụng hàm CSS 9 để tạo tỷ lệ khung hình phù hợp dựa trên các thuộc tính hình ảnh 2 và 3 do HTML cung cấp. Hàm 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ư 2 và 3, đây là thứ cần thiết ở đâyNếu 9 có thể được sử dụng cho các thuộc tính nổi tiếng 2 và 3 từ các phần tử 9, thì nó có thể được sử dụng để tự động tính toán 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
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 2 và 3 để tính toán 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àyBở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ử 2 mà phần tử 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 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ênTuy nhiên, điều này phụ thuộc vào việc hàm 9 có quyền truy cập vào các thuộc tính HTML 2 và 3, cũng như thuộc tính CSS 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ònFirefox đã đ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ượcKhi 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 2 và 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 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ácSau 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ậtBản sửa lỗi hoạt động rất tốt để tính tỷ lệ khung hình dựa trên 2 và 3 cố định, nhưng còn khi những thay đổi đó thì sao? '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ử 0Hiện tại, điều này chỉ cho phép đặt 2 và 3 một lần trên phần tử chính, dự phòng 6 chứ không phải trên các phương án thay thế 6 hoặc ít nhất một phần tử không có phần tử 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ử 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 3Tả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ử 6 với một 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ử 7) 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 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 ảnhHiệ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ử 6, nhưng nó cũng sẽ hữu ích đối với các phần tử 9, 00 và 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 9 và thuộc tính 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ốnCập nhật (Tháng 10. 2021). Kể từ đó, hỗ trợ CSS 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 05Phần kết luậnTô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 2 và 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ẻ 6 có 2 hoặc 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. |