Hình ảnh (Image) trong Bootstrap 4

• 12-06-2020 11:35:30
• by: baobinhnet

Trong bài này, chúng ta lại tiếp tục đến với nội dung liên quan đến chỉnh sửa, tạo hình ảnh bằng class trong bootstrap 4. 

Trong Bootstrap 4, các bạn có thể hiển thị hình ảnh với nhiều định dạng như bo tròn 4 góc, hình tròn hay hình có khung ảnh bao quanh.

Hình có bo tròn góc

Để hiển thị hình có góc bo tròn, bạn có thể thêm lớp .rounded vào một thẻ hình ảnh.
 

Hình ảnh tròn

Sử dụng class .rounded-circle để biến hình ảnh iển thị thành hình tròn.

Hình ảnh thu nhỏ

Nếu bạn muốn tạo hình thu nhỏ có khung viền xung quanh thì bạn có thể sử dụng lớp .img-thumbnail

 

Căn chỉnh lề hình ảnh

Hai class .float-right và .float-left dùng để canh chỉnh hình ảnh xuất hiện ở bên trái hoặc bên phải nội dung như sau:

Căn giữa hình ảnh

Để căn giữa hình ảnh, bạn có thể dùng class .mx-auto (margin:auto) và .d-block (display:block) vào hình ảnh cần căn giữa.

Ví dụ:

Hình ảnh reponsive

Tính năng hiển thị hình ảnh theo kích thước màn hình của các thiết bị khác nhau là một tính năng tuyệt vời của Bootstrap. Để thực hiện hiển thị hình ảnh reponsive trên các thiết bị, đơn giản là bạn chỉ cần thêm lớp .img-fluid vào hình cần thêm. Khi đó lớp này sẽ áp dụng phong cách max-width: 100%; và height: auto; vào hình ảnh.

Kết luận

Như vậy, chúng ta đã cùng nhau nghiên cứu về các vấn đề style thẻ ảnh <img> trong một văn bản html với bootstrap 4. Hẹn các bạn trong bài học tiếp theo.

---

• Posted by baobinhnet
• 2020-06-12 11:35:30