Bài 3: Cách chèn image trong Bootstrap

Bài 3: Cách chèn image trong Bootstrap

Không phải ai cũng biết cách chèn image sao cho hợp lý, đừng lo Bootstrap sẽ giúp chúng ta làm điều đó.

Trong mỗi nội dung trên trang web thì ngoài việc phân bổ các đoạn Text hay Typography trong Bootstrap ra thì yếu tố quan trọng nữa đó là hình ảnh.

Chèn image co giãn tự động trong Bootstrap

Thông thường khi chúng ta chèn vào một image vào bằng thẻ img nó lấy luôn kích thước của ảnh đó dẫn đến việc ảnh quá rộng hoặc quá nhỏ không phù hợp với khung bên ngoài.

Điều đó làm mất đi sự cân đối của một nội dung bài viết, đối với Bootstrap thì chúng ta hoàn toàn yên tâm về điều này.

Để tạo một hình ảnh vừa với khung nhìn thì ta có thể sử dụng như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/03/cropped-banner-dau-trang.jpg" class="img-fluid" alt="hinh-nen-trang-chu-sonnguyenaz">
    <!-- End Example Code -->
  </body>
</html>

Sử dụng class=”img-fluid” thì cho dù bạn có sử dụng di động hay máy tính bảng đều không bị vượt khung được.

Mà nó tự co giãn kích thước chiều rộng bằng 100% và chiều cao tự phân theo tỷ lệ khung hình(max-width: 100%;và height: auto;).

Kết quả là:

chen-image-trong-bootstrap

Chèn image thumbnails trong Bootstrap

Với thuộc tính .img-thumbnail khi bạn chèn ảnh sẽ tạo ra 1 đường viền bo tròn có kích thước 1px

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/logo-cover.png" class="img-thumbnail" alt="hinh-nen-trang-chu-sonnguyenaz">
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

chen-image-thumbnails

Bây giờ chúng ta có thể căn chỉnh vị trí hiển thị tùy ý nếu để mặc định thì nó luôn đưa về bên trái của khung:

  • class=”img-thumbnail float-start”: Bên trái.
  • class=”img-thumbnail mx-auto d-block”: Ở giữa.
  • class=”img-thumbnail float-start”: Bên phải.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/logo-cover.png" class="img-thumbnail float-start" alt="hinh-nen-trang-chu-sonnguyenaz">
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/logo-cover.png" class="img-thumbnail float-end" alt="hinh-nen-trang-chu-sonnguyenaz">
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/logo-cover.png" class="img-thumbnail  mx-auto d-block"" alt="hinh-nen-trang-chu-sonnguyenaz">
    <!-- End Example Code -->
  </body>
</html>

Và kết quả là:

can-chinh-hinh-anh-sang-giua-ben-phai-va-ben-trai

Tạo chú thích cho image

Để tạo một chú thích cho hình ảnh thì thư viện Bootstrap có class=”figure” sử dụng như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<figure class="figure">
	<img src="https://sonnguyenaz.com/wp-content/uploads/2023/07/logo-cover.png" class="figure-img img-fluid rounded" alt="logo">
	<figcaption class="figure-caption text-center">logo sonnguyenaz.com</figcaption>
	</figure>
    <!-- End Example Code -->
  </body>
</html>

Ta cũng có thể căn lề cho chú thích về phía bên trái, phải và ở giữa bằng thuộc tính:

  • text-start: căn lề bên trái.
  • text-center: căn giữa.
  • text-end: căn phía bên phải.

Kết quả là:

Lời kết

Như vậy chúng ta đã cùng tìm hiểu về cách chèn image bằng cách sử dụng các class của Bootstrap.

Mình nhắc lại là hình ảnh rất quan trọng trong mỗi trang web nên các bạn lưu ý làm cho đúng và hợp lý nhé.

Bài viết cùng chủ đề:

Cảm ở các bạn đã theo dõi bài viết này.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

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 *