Hình ảnh trong Bootstrap 4

Hình ảnh trong Bootstrap 4

Anh NguyễnBạn nghĩ gì về bài viết này?

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).

Hình ảnh trong Bootstrap 4
<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).

Hình ảnh trong Bootstrap 4
<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.

Hình ảnh trong Bootstrap 4
<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.

Hình ảnh trong Bootstrap 4
<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).

Hình ảnh trong Bootstrap 4
<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.

Bình luận