Bootstrap 4 - Bootstrap Images

Định Dạng Hình Ảnh Trong Bootstrap

Hình ảnh là yếu tố không thể thiếu trong thiết kế web hiện đại. Vì vậy việc định dạng và chọn vị trí hình ảnh hiển thị trên các trang web là khâu cực kỳ quan trọng, để cải thiện trải nghiệm người dùng.

Bằng cách sử dụng các lớp được tích hợp sẵn trong Bootstrap, chúng ta có thể dễ dàng định dạng hình ảnh theo các kiểu dáng khác nhau, chẳng hạn như tạo hình ảnh với 4 góc bo tròn, ....

Ví dụ: ví dụ dưới đây minh họa cách định dạng hình ảnh trong Bootstrap theo các kiểu dáng khác nhau:

<img src="images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">

Xem ví dụ


Tạo Hình Ảnh Đáp Ứng Và Video Trong Bootstrap

Trong Bootstrap, chúng ta có thể tạo các hình ảnh đáp ứng bằng cách thêm lớp .img-fluid vào thẻ img. Lớp này áp dụng style max-width: 100%; và height: auto; cho hình ảnh để chia tỷ lệ cho phù hợp với phần tử chứa, trong trường hợp nếu chiều rộng của hình ảnh lớn hơn phần tử chứa.

Ví dụ: ví dụ dưới đây minh họa cách tạo hình ảnh đáp ứng và video trong Bootstrap:

<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">

Xem ví dụ

Lưu ý: Khi tạo bố cục trang web responsive đừng quên tạo hình ảnh đáp ứng, nếu không chiều rộng hình ảnh có thể lớn hình chiều rộng của phần tử cha, khi đó hình ảnh sẽ bị tràn và phá vỡ bố cục trang web.

Ngoài ra chúng ta cũng có thể tạo video hoặc slide trình chiếu được nhúng trong trang web đáp ứng mà không ảnh hưởng đến tỷ lệ khung hình gốc. Để làm được điều này chúng ta chỉ cần gói phần nhúng bất kỳ chẳng hạn như iframe hoặc video trong phần tử div và áp dụng lớp .embed-responsive và lớp tỷ lệ khung hình như .embed-responsive-16by9.

Thậm chí là áp dụng lớp con .embed-responsive-item trên phần tử nhúng để phù hợp với định dạng các thuộc tính khác như trong ví dụ dưới đây:

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

Xem ví dụ

Trong ví dụ trên chúng ta tạo 4 video đáp ứng với 4 tỷ lệ khung hình khác nhau (21:9, 16:9, 4:3 và 1:1) bằng cách sử dụng các lớp .embed-responsive-21by9.embed-responsive-16by9.embed-responsive-4by3 và lớp .embed-responsive-1by1.

Mẹo: Tỷ lệ khung hình của hình ảnh mô tả mối quan hệ giữa tỷ lệ giữa chiều rộng và chiều cao. Hai tỷ lệ khung hình quay video phổ biến nhất là 16:9 và 4:3.


Căn Chỉnh Hình Ảnh Trong Bootstrap

Để căn chỉnh hình ảnh sang trái hoặc phải, chúng ta sử dụng các lớp .pull-left hoặc lớp .pull-right. Hoặc sử dụng các lớp căn chỉnh text như .text-left, .text-right và .text-center trên các phần tử chứa phần tử cha để căn chỉnh hình ảnh nội tuyến sang trái, phải hoặc chính giữa.

Để căn giữa hình ảnh dạng khối, chúng ta sử dụng lớp tiện ích căn lề .mx-auto.

Ví dụ: Trong ví dụ dưới đây minh họa cách căn chỉnh hình ảnh trong Bootstrap:

<!-- Horizontal alignment using float classes -->
<div class="box clearfix">
    <img src="images/avatar.svg" class="pull-left" alt="Sample Image">
    <img src="images/avatar.svg" class="pull-right" alt="Sample Image">
</div>

<!-- Left alignment using text alignment classes -->
<div class="box text-left">
    <img src="images/avatar.svg" alt="Sample Image">
</div>

<!-- Right alignment using text alignment classes -->
<div class="box text-right">
    <img src="images/avatar.svg" alt="Sample Image">
</div>

<!-- Center alignment using text alignment classes -->
<div class="box text-center">
    <img src="images/avatar.svg" alt="Sample Image">
</div>

<!-- Center alignment of block-level image using auto margin -->
<div class="box">
    <img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>

Xem ví dụ