Bootstrap Image

Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho hình ảnh, cũng như cách tạo hình ảnh và video responsive bằng Bootstrap.

Tạo kiểu cho hình ảnh với Bootstrap

Hình ảnh rất phổ biến trong thiết kế web hiện đại. Vì vậy, việc tạo kiểu hình ảnh và đặt nó đúng cách trên các trang web là rất quan trọng để cải thiện trải nghiệm người dùng.

Sử dụng các lớp tích hợp sẵn của Bootstrap, bạn có thể dễ dàng tạo kiểu cho hình ảnh, chẳng hạn như tạo hình bo tròn hoặc hình tròn, hoặc tạo cho chúng hiệu ứng như hình thu nhỏ.

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo hình ảnh và video responsive

Với Bootstrap, bạn cũng có thể làm cho hình ảnh responsive nhanh chóng. Chỉ cần thêm lớp .img-fluid vào thẻ <img>. Lớp này chủ yếu áp dụng các kiểu max-width: 100%; và height: auto; cho hình ảnh để nó thay đổi tỷ lệ vừa vặn 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 chính phần tử chứa. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

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

Lưu ý: Khi tạo bố cục responsive, hãy cân nhắc cả việc làm cho hình ảnh của bạn responsive, nếu không, nếu chiều rộng hình ảnh lớn hơn chiều rộng của phần tử cha trong mọi trường hợp, nó sẽ tràn và có thể phá vỡ bố cục trang web của bạn.

Bạn cũng có thể làm cho video hoặc slideshow được nhúng trong một trang web trở nên responsive mà không ảnh hưởng đến tỷ lệ kích thước ban đầu của nó. Để thực hiện việc này, hãy bọc bất kỳ nhúng nào như một <iframe> hoặc <video> trong một phần tử <div> và áp dụng lớp .embed-responsive và một lớp tỷ lệ khung hình chẳng hạn như .embed-responsive-16by9.

Bạn có thể tùy chọn áp dụng một lớp con .embed-responsive-item trên phần tử được nhúng để khớp với kiểu cho các thuộc tính khác. Đây là một ví dụ:

<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>

Trong ví dụ trên, chúng tôi đã tạo 4 video nhúng responsive 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 .ratio-21x9, .ratio-16x9, .ratio-4x3 và .ratio-1x1 tương ứng ngoài lớp cơ sở trên phần tử bao bọc.

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

Căn chỉnh theo chiều ngang của hình ảnh

Bạn có thể sử dụng các lớp căn chỉnh văn bản , chẳng hạn như .text-center và .text-end trên vùng chứa cha để căn chỉnh các hình ảnh bên trong theo chiều ngang giữa và phải. Bạn cũng có thể căn chỉnh hình ảnh sang trái và phải trong một hộp lớn hơn bằng cách sử dụng các lớp .float-start và .float-end.

Tuy nhiên, để căn giữa các hình ảnh trong khối, bạn cần sử dụng lớp tiện ích lề .mx-auto. Hãy thử ví dụ sau để hiểu nó thực sự hoạt động như thế nào:

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

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

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

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

Bootstrap • Bootstrap Cơ Bản