How to make Bootstrap images responsive

Như Google đang tiến tới chỉ số điện thoại di động đầu tiên và ngày càng có nhiều người trên toàn cầu đang sử dụng điện thoại di động / điện thoại thông minh để lướt internet, nó đã trở thành cần thiết mà nội dung của bạn của trang web điều chỉnh theo các màn hình người sử dụng photowonder mới nhất; cho dù đó là một máy tính để bàn / máy tính xách tay, một viên thuốc hoặc một chiếc điện thoại thông minh.

Khung Bootstrap 4 có các lớp cụ thể để làm cho hình ảnh được đáp ứng để đảm bảo hình ảnh trong trang web của bạn thích nghi với màn hình sử dụng và chiều rộng của họ không mở rộng đến các yếu tố phụ huynh có chứa những hình ảnh.
Trong phần tiếp theo, tôi sẽ cho bạn thấy ví dụ về hình ảnh đáp ứng Bootstrap bằng cách sử dụng class img-bluid, vì vậy hãy tham khảo những nội dung dưới đây.

Difference between responsive and non-responsive images demo

Để hiển thị sự khác biệt và cách dễ dàng là tạo ra những hình ảnh đáp ứng bằng cách sử dụng các lớp image Bootstrap; nhìn thấy hai hình ảnh trong bản demo bên dưới. Là người đầu tiên được thực hiện đáp ứng bởi Bootstrap 4 lớp trong khi người kia không được gắn bất kỳ lớp.
Mở trình diễn bằng cách làm theo các liên kết và thay đổi kích thước màn hình để xem làm thế nào đầu hình ảnh điều chỉnh cho chiều rộng và chiều cao trong khi thanh cuộn xuất hiện cho hình ảnh thứ hai. Vậy làm thế nào nó được thực hiện?
Các Bootstrap có lớp .img-fluid với max-width: 100% và giá trị tự động cho chiều cao mà đảm bảo hình ảnh được thu nhỏ với yếu tố auto.

Trong bản demo trên, để làm hình ảnh đáp ứng, tôi chỉ đơn giản là sử dụng lớp .img-fluid.

<h1>.img-fluid in bootstrap 4</h1>
<div class="container">
<h3>Responsive Vs Non-responsive images</h3>
<img src="images/4.png" class="img-fluid" alt="Responsive image by Bootstrap"><br /><br /><br />
<img src="images/6.png" alt="A non responsive image">
</div>

Making thumbnail images responsive

Nếu bạn có một bộ sưu tập hình ảnh với hình thu nhỏ thì Bootstrap 4 cũng có một lớp cụ thể cho việc này. Sử dụng lớp .img-thumbnail thu nhỏ không chỉ làm cho hình ảnh thu nhỏ phản hồi mà còn thêm một bán kính đường viền pixel xung quanh hình thu nhỏ.

Xem bản demo sau đây nơi tôi đã sử dụng bốn hình ảnh thu nhỏ với lớp .img-thumbnail thu nhỏ. Một lần nữa, thay đổi kích thước màn hình để xem cách chúng điều chỉnh với chiều rộng và chiều cao màn hình cùng với viền tròn:

<h1>Making thumbnail images responsive</h1>
<div class="container">
<h3>Responsive Thumbnails Demo</h3>
<img src="images/doc.png" class="img-thumbnail" alt="Responsive Thumbnail image 1">   <img
src="images/doc.png" class="img-thumbnail" alt="Responsive Thumbnail image 2"><br /><br /><br />
<img src="images/rain.png" class="img-thumbnail" alt="Responsive Thumbnail image 3">   <img
src="images/doc.png" class="img-thumbnail" alt="Responsive Thumbnail image 4"><br /><br /><br />
</div>

Aligning images towards left and right example

Sử dụng các lớp .float-left và .float-left để căn chỉnh hình ảnh về phía bên trái và bên phải của phần tử cha.

Xem ví dụ này nơi tôi đã sử dụng các lớp này trong thẻ <img> bên trong div cha với lớp container.

Trong màn hình rộng hơn, hình ảnh được căn trái và phải. Khi màn hình nhỏ hơn (trong điện thoại thông minh), hình ảnh sẽ điều chỉnh tương ứng. Có một cái nhìn:

<h1>Aligning images towards left and right example</h1>
<div class="container">
<h3>Aligning images example</h3>
<img src="images/iconng.png" class="img-thumbnail float-left" alt="Left aligned image">
<img src="images/iconng.png" class="img-thumbnail float-right" alt="Right aligned image">
</div>

How to make images circular?

Bạn có thể sử dụng lớp .rounded-circle trong thẻ <img> để làm cho hình ảnh trông tròn. Nếu bạn thêm hình thu nhỏ .img với hình tròn .rounded thì hình ảnh cũng được hiển thị với đường viền mỏng.

Ví dụ dưới đây cho thấy làm cho hình ảnh tròn có và không có viền viền:

<h1>How to make images circular</h1>
<div class="container">

<h3>Circle images example</h3>

<img src="images/4.png" class="img-thumbnail rounded-circle" alt="Left aligned circuular image">

<img src="images/6.png" class="rounded-circle float-right" alt="Right aligned circular image">

</div>