Trong Bootstrap 4, có nhiều cách hay ho để làm với hình ảnh ví dụ như bo tròn 4 góc, hiển thị ảnh theo hình tròn hay hình có khung ảnh đẹp mắt bao quanh. Trong bài này chúng ta sẽ học các cách để hiển thị hình ảnh trong Bootstrap 4 bạn nhé.
Hình dạng hình ảnh trong Boostrap 4
Hình ảnh có góc tròn
Lớp .rounded thêm các góc tròn vào hình ảnh:
Ví dụ:
<img src="cuccc.jpg" class="rounded" alt="CTY" width="160" height="160">
Hình ảnh hiển thị dạng tròn
Lớp .rounded-circle định hình hình ảnh thành hình tròn:
<img src="cuccc.jpg" class="rounded-circle" alt="CTY" width="160" height="160!important">
Hình thu nhỏ (thumbnail)
Lớp .img-thumbnail định hình hình ảnh thành hình thu nhỏ (có viền):
<img src="cuccc.jpg" class="img-thumbnail" alt="CTY" height="160!important">
Code minh họa cả 3 trường hợp
<!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.2/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.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row" style="padding-top:50px;"> <div class="col"> <img src="cuccc.jpg" class="rounded" alt="CTY" width="160" height="160"> </div> <div class="col"> <img src="cuccc.jpg" class="rounded-circle" alt="CTY" width="160" height="160!important"> </div> <div class="col"> <img src="cuccc.jpg" class="img-thumbnail" alt="CTY" width="216" height="160!important"> </div> </div> </div> </body> </html>
Căn chỉnh hình ảnh (Aligning Images)
Bootstrap 4 sử dụng lớp .float-right để căn chỉnh ảnh sang bên phải hoặc sang bên trái với .float-left:
Ví dụ:
<div class="container"> <img src="cuccc.jpg" class="rounded-circle float-right" alt="CTY" width="160" height="160!important"> <img src="cuccc.jpg" class="rounded-circle float-left" alt="CTY" width="160" height="160!important"> </div>
Căn giữa Hình ảnh
Căn giữa hình ảnh bằng cách thêm các lớp tiện ích .mx-auto (margin: auto) và .d-block (display: block) vào hình ảnh:
<img src="cuccc.jpg" class="rounded-circle mx-auto d-block " alt="CTY" width="160" height="160!important">
Hình ảnh đáp ứng
Hình ảnh có đủ kích cỡ. Màn hình cũng vậy. Hình ảnh đáp ứng 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 cách thêm lớp .img-fluid vào thẻ <img>. Sau đó, hình ảnh sẽ thay đổi tỷ lệ phù hợp với phần tử mẹ.
Lớp ..img-fluid áp dụng chiều rộng tối đa: 100%; và chiều cao: auto; vào hình ảnh:
<img src="cuccc.jpg" class="img-fluid" alt="CTY">
Lời kết:
Việc áp dụng các lớp hiển thị hình ảnh trong Bootstrap 4 làm cho ảnh của bạn sinh động và hấp dẫn hơn. Tuy nhiên các bạn cũng đừng quá lạm dụng nó vì sửu dụng nhiều quá sẽ gây nên rối mắt hơn. Chúc các bạn học tốt!
