Kích thước hình ảnh Bootstrap

Thành phần Hình ảnh đại diện cho một hình ảnh, hình minh họa hoặc ảnh chụp trong thiết kế của bạn. Nó có thể trỏ tới hình ảnh mà bạn đã nhập trong thiết kế của mình hoặc tới những hình ảnh được lưu trữ bên ngoài

Khái niệm cơ bản

Kéo và thả một thành phần Hình ảnh từ bảng Thành phần vào vùng hiển thị. Nó sẽ xuất hiện trống vì nó sẽ không trỏ đến bất kỳ tệp hình ảnh nào. Nhấp đúp vào hình ảnh sẽ mở Trình duyệt hình ảnh, nơi bạn có thể duyệt tất cả các hình ảnh đã nhập trong thiết kế của mình

Chọn một trong các hình ảnh bằng cách nhấp đúp vào nó (hoặc bằng cách nhấp một lần và chọn Lưu). Điều này sẽ hiển thị nó trên trang

Tùy chọn hình ảnh

Khi một thành phần Hình ảnh được chọn, bảng Tùy chọn sẽ hiển thị một số điều khiển hữu ích để tùy chỉnh hình ảnh của bạn

Dưới đây là mô tả nhanh về cài đặt

• URL nguồn - Chứa URL của hình ảnh mà thành phần đang hiển thị. Bạn có thể sử dụng nó để trỏ đến hình ảnh từ xa
• Chiều rộng & Chiều cao - Đặt các thuộc tính tương ứng trên hình ảnh, xác định kích thước của nó. Tốt hơn là sử dụng CSS thay vì hai tùy chọn này
• Alt - Đây là phần mô tả hình ảnh của bạn chứa gì. Nó được hiển thị khi không thể tải hình ảnh và được đọc bởi trình đọc màn hình
• Lazy Loading - Tùy chọn này kiểm soát thuộc tính tải (mở cửa sổ mới), có thể khiến trình duyệt chỉ tải hình ảnh khi chúng hiển thị
• Style - Cho phép bạn nhanh chóng xác định hình dạng cơ bản của hình ảnh
• Responsive - Tùy chọn này đảm bảo rằng hình ảnh chia tỷ lệ với cha của nó và không bao giờ vượt quá chiều rộng của nó. Bằng cách này, bố cục của bạn trông tuyệt vời trên mọi kích thước màn hình

Để biến một hình ảnh thành một liên kết, sao cho việc nhấp vào nó dẫn người dùng đến một trang/trang web khác, bạn cần thả hình ảnh vào trong một thành phần Link. bước

1. Tìm thành phần Link trong bảng Thành phần và thả nó vào trang
2. Xóa văn bản của liên kết, để nó trống
3. Thả một hình ảnh bên trong liên kết. Bạn sẽ cần thực hiện việc này từ bảng Tổng quan, vì khi liên kết trống, liên kết không có chiều cao và bạn sẽ không thể thả hình ảnh bên trong liên kết đó từ Giai đoạn

Giờ đây, bạn có thể kiểm soát URL mà hình ảnh dẫn đến khi nhấp vào, bằng cách chọn thành phần Link và thay đổi cài đặt URL của nó trong bảng Tùy chọn

hình ảnh từ xa

Thay vì nhập tệp hình ảnh, bạn có thể trỏ thành phần Hình ảnh tới một URL. Chỉ cần dán URL của bạn vào trường Source URL. Bằng cách này, bạn không cần nhập hình ảnh trong Bootstrap Studio và máy chủ của bạn kiểm soát hình ảnh nào sẽ trả về máy khách

Ghi chú

Không liên kết đến hình ảnh được lưu trữ trên trang web của người khác. Điều này được gọi là hotlinking và được coi là một thực tiễn xấu. Chủ sở hữu trang web có thể xóa hoặc thay đổi hình ảnh bất cứ lúc nào, phá vỡ các trang web của bạn

Bootstrap cung cấp các lớp khác nhau cho hình ảnh để làm cho chúng trông đẹp hơn và cũng để làm cho chúng phản hồi nhanh. Tạo một hình ảnh phản hồi có nghĩa là hình ảnh đó phải chia tỷ lệ theo phần tử gốc của nó. Nghĩa là, kích thước của hình ảnh không được vượt qua cha mẹ của nó và sẽ tăng và thu nhỏ theo sự thay đổi về kích thước của cha mẹ mà không làm mất tỷ lệ khung hình của nó

Bootstrap là một khung CSS nguồn mở, chủ yếu để xây dựng các trang web đáp ứng và các ứng dụng ưu tiên thiết bị di động. Khung có các cài đặt CSS toàn cầu; . g. , băng chuyền, biểu mẫu và thanh điều hướng;

Bạn có thể tạo các thành phần bằng cách thêm các lớp Bootstrap vào các thành phần. Các lớp đó cũng tạo kiểu cho hình ảnh và tối ưu hóa chúng cho hành vi phản hồi, tôi. e. , chia tỷ lệ cùng với vùng chứa hình ảnh khi cửa sổ trình duyệt được thay đổi kích thước

Thiết kế web đáp ứng (RWD) chứa các trang web và ứng dụng phát hiện kích thước và hướng màn hình của khách truy cập để trình duyệt có thể tự động điều chỉnh màn hình cho phù hợp. Cách tiếp cận ưu tiên thiết bị di động giả định rằng máy tính bảng, ứng dụng dành cho thiết bị di động dành riêng cho nhiệm vụ và điện thoại thông minh là những công cụ chính để hoàn thành công việc, giải quyết các yêu cầu của chúng trong thiết kế

Hình ảnh phản hồi là gì?

Là một thành phần quan trọng của bố cục linh hoạt, hình ảnh đáp ứng điều chỉnh kích thước, hướng và độ phân giải của hình ảnh dựa trên thiết bị của người dùng cuối, cho phép các trang web phát hiện và phản hồi các điều kiện màn hình của khách truy cập

Theo quy định, hình ảnh phản hồi cung cấp nhiều tùy chọn cho một hình ảnh. Tùy thuộc vào kích thước màn hình, trang web sẽ gửi phiên bản nhỏ hơn hoặc lớn hơn của hình ảnh sắc nét trực quan để trình duyệt có thể tải xuống phiên bản có kích thước phù hợp. Quá trình hình ảnh phản hồi xảy ra trước khi hình ảnh đến trình duyệt

Để biết thêm chi tiết, hãy xem Thực tiễn tốt nhất cho thiết kế web đáp ứng.  

Bài viết này giải quyết các chủ đề sau

Hiểu các điều kiện tiên quyết cho Bootstrap Responsive Images

Trước khi thiết lập hình ảnh phản hồi cho trang của bạn, hãy chuẩn bị sẵn các gói Bootstrap CSS và JavaScript bằng cách tải xuống các tệp được biên dịch mới nhất của chúng

Ngoài ra, hãy thêm các tập lệnh Bootstrap cần thiết vào các trang của bạn bằng mạng phân phối nội dung JSDeliver (CDN) miễn phí. Không cần tải xuống. Làm theo các bước dưới đây

Làm cách nào để tạo tất cả các Hình ảnh có cùng kích thước trong Bootstrap?

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

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

Làm cách nào để tạo hình ảnh toàn màn hình trong Bootstrap?