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.

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

Đăng ký nhận bộ tài liệu học Java trên 2 trang giấy tại đây

Xem thêm: Java Coding Bootcamp là gì? Tổng quan về Java Coding Bootcamp

Download - Giáo trình thuật toán

11 + 1 =

Tags: Bootstrap

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

11 + 14 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM