NỘI DUNG BÀI VIẾT
Trong bài viết này, chúng ta sẽ tìm hiểu về các kiểu tạo phong cách cho Hình ảnh trong Bootstrap 4.
Các kiểu hiển thị hình ảnh trong Bootstrap 4
Bootstrap bo góc hình ảnh
Để bo góc hình ảnh, chúng ta sử dụng lớp .rounded (tuy nhiên trình duyệt IE8 không hỗ trợ lớp này).
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Bootstrap bo tròn hình ảnh
Khi sử dụng lớp .rounded-circle, hình ảnh sẽ hiển thị theo kiểu bo tròn (tuy nhiên trình duyệt IE8 không hỗ trợ lớp này).
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Bootstrap hiển thị hình ảnh thumbnail
Để tạo hình ảnh thumbnail với viền ở ngoài, chúng ta sử dụng lớp .img-thumbnail.
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Căn chỉnh vị trí hình ảnh
Trong Bootstrap 4, khi chúng ta sử dụng lớp .float-left, hình ảnh sẽ tự động đẩy về bên trái. Ngược lại, với lớp .float-right , hình ảnh sẽ tự động đẩy về bên phải.
<img src="paris.jpg" class="float-left"> <img src="paris.jpg" class="float-right">
Để căn giữa hình ảnh, Bootstrap 4 hỗ trợ các lớp hữu dụng để làm việc này: .mx-auto (margin: auto) và .d-block (display: block).
<img src="paris.jpg" class="mx-auto d-block">
Hình ảnh đáp ứng
Hình ảnh có nhiều kích cỡ, cũng giống như màn hình vậy. Hình ảnh đáp ứng sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình. Tạo hình ảnh đáp ứng bằng lớp .img-fluid trong thẻ <img>. Hình ảnh sẽ chia đúng tỷ lệ theo lớp cha của nó. Mặc định, lớp .img-fluid cung cấp max-width: 100% và height: auto.
<img class="img-fluid" src="img_chania.jpg" alt="Chania"> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Image</h2> <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p> <img class="img-fluid" src="img_chania.jpg" alt="Chania" width="460" height="345"> </div> </body> </html>
Kết luận
Qua đây là một số chia sẻ về Bootstrap, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về Bootstrap.
Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
