Trang chủ » Blog » Hình ảnh trong Bootstrap 4

Hình ảnh trong Bootstrap 4

bởi CodeGym | 26/12/2023 15:37 | Blog

Trong bài học 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.

Nội dung

Các kiểu hiển thị hình ảnh trong Bootstrap 4
Căn chỉnh vị trí hình ảnh
Hình ảnh đáp ứng

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

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

Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_images.asp