Tự học Bootstrap – Cơ bản – bài 05 – Định dạng hình ảnh

Định dạng ảnh trong Bootstrap

Bo tròn góc

Lớp .img-rounded thêm các góc bo tròn vào 01 bức ảnh (IE8 không hỗ trợ thuộc tính bo tròn góc)

Ví dụ:

<img src="hinh\xinh.jpg" class="img-rounded" alt="Lớp học vi tính.COM" width="304" height="236">

---

Hình tròn

Lớp .img-circle làm cho bức ảnh có hình tròn (IE8 cũng không hỗ trợ định dạng này).

Ví dụ:

<img src="xinh.jpg" class="img-circle" alt="Lớp học vi tính.COM" width="304" height="236">

---

Thumbnail

Lớp .img-thumbnail biến bức ảnh thành 01 thumbnail.

Ví dụ:

<img src="xinh.jpg" class="img-thumbnail" alt="Lớp học vi tính.COM" width="304" height="236">

---

Định dạng ảnh tương thích

Hình ảnh có nhiều kích cỡ. Màn hình cũng vậy. Ảnh tương thích là ảnh tự động thay đổi kích cỡ tương ứng với kích cỡ màn hình.

Tạo ra những hình ảnh tương thích nhiều cỡ màn hình bằng cách thêm lớp .img-responsive vào thẻ <img>. Hình ảnh sau đó sẽ thay đổi kích cỡ tương ứng với đổi tượng cha( đối tượng chứa nó).

Lớp .img-responsive áp dụng các định dạng sau: display: block; và max-width: 100%; và height: auto; vào bức ảnh.

Ví dụ:

<img class="img-responsive" src="xinh.jpg" alt="Lớp học vi tính.COM">

---

Thư viện ảnh

Bạn cũng có thể dùng hệ lưới Bootstrap trong việc kết hợp với lớp .thumbnail để tạo thư viện ảnh.

Ghi chú: Bạn sẽ học nhiều hơn về hệ lưới trong các bài hướng dẫn sau này (cách tạo 01 layout với tổng số cột khác nhau).

Ví dụ:

 <div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="hinh/chi pu.jpg">
        <img src="hinh/chi pu.jpg" alt="Chi Pu" style="width:100%">
        <div class="caption">
          <p>Chi Pu...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="hinh/linh miu.jpg">
        <img src="hinh/linh miu.jpg" alt="Linh Miu" style="width:100%">
        <div class="caption">
          <p>Linh Miu...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="hinh/phuong trinh.jpg">
        <img src="hinh/phuong trinh.jpg" alt="Angela" style="width:100%">
        <div class="caption">
          <p>Angela Phương Trinh...</p>
        </div>
      </a>
    </div>
  </div>
</div>

---

Các định dạng nhúng tương thích

Các videos hoặc slideshows cũng có thể đưuọc định dạng tự động thu phóng phù hợp với các thiết bị hiển thị.

Các lớp định dạng này có thể áp dụng trục tiếp cho các thẻ sau: <iframe>, <embed>, <video>, và <object>.

Ví dụ sau tạo ra 01 video tương thích màn hình bằng cách thêm vào 01 lớp .embed-responsive-item trong thẻ <iframe> (đoạn video sau đó sẽ tự động thu phóng phù hợp với thẻ chứa nó). Thẻ chứa <div> xác định tỉ lệ màn hình của video.

Ví dụ:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="link youtube"></iframe>
</div>

Tỉ lệ màn hình là gì?

Tỉ lệ màn hình của 01 bức ảnh mô tả mối liên hệ giữa chiều rộng và chiều cao. 02 tỉ lệ màn hình video thông dụng là 4:3 (chuẩn định dạng toàn cầu video của hãng 20th century), và 16:9 (chuẩn chung cho truyền hình HD và truyền hình kỹ thuật số Châu Âu).

Bạn có thể chọn giữa 02 tỉ lệ trên bằng 02 lớp sau:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="Link You Tube"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="Link You Tube"></iframe>
</div>