Responsive Image trong website sử dụng bootstrap framework

Bootstrap là một framework khá hay để phát triển giao diện website, đặc biệt là đối với các website theo xu hướng responsive. Tuy nhiên khi bắt tay vào xây dựng một dự án cụ thể bạn sẽ gặp một số vấn đề, ở bài này tôi muốn nói đến hiện tượng các hình ảnh trong nội dung bài viết không response theo khung mà sẽ bị tràn ra ngoài khi xem trên các thiết bị mobile hay tablet. Vậy làm sao để giải quyết vấn đề này?

Với mỗi bài viết, thông thường sẽ có 2 loại hình ảnh.

1. Hình ảnh đại diện của bài viết

- Đối với hình ảnh này chúng ta có thể dễ dàng áp dụng response cho nó một cách rất đơn giản, đó là thêm class .img-responsive trực tiếp cho nó. Vì hình ảnh này ta hoàn toàn có thể xác định được khi load dữ liệu

<img id="_imgArticle_0" class="img-responsive" title="NoSQL là gì? Tại sao cần quan tâm?" src="../data_news/art-17572.gif" />

.img-responsive là một class mới trong bootstrap 3.0, hỗ trợ cho việc responsive hình ảnh một cách đơn giản và nhanh chóng

2. Hình ảnh trong nội dung bài viết

- Hình ảnh trong nội dung chi tiết các tin bài chúng ta đăng mới là vấn đề ở đây.  Vì chúng ta rất khó để có thể xác định cụ thể được hình ảnh trong bài viết để thêm class img-responsive vào, và với lượng tin bài nhiều thì việc ngồi dò hình ảnh và thêm class là một việc không tưởng...

- Và để giải quyết vấn đề này, thay vì việc đi sửa thủ công từng hình ảnh trong mỗi bài viết, chúng ta hãy viết một đoạn mã javascript để thêm class cho các thẻ img trong toàn bộ nội dung bài viết mỗi khi tải trang. Ở đây, nội dung chi tiết hiện thì trong 1 thể div có id="div-content-article", ý tưởng ở đây là sẽ lập trình 1 script đề dò toàn bộ các thẻ <img> trong div#div-content-article và thêm class=''img-responsive". Đoạn mã của chúng ta sẽ như sau.

$("#div-content-article img").each(function () {
    $(this).removeAttr("style");
    $(this).removeAttr("class");
    $(this).addClass("img-responsive")
});

- Trong đoạn mã trên các bạn để ý có 2 dòng sau

$(this).removeAttr("style");     
$(this).removeAttr("class");

- Mục đích là để loại bỏ các style và class cũ nếu có được gắn với hình ảnh trước đó để không ảnh hưởng đến class mới img-responsive khi chúng ta thêm vào. 

Như vậy chỉ với vài dòng javascript là chúng ta đã có thể xử lý triệt để được hiện tượng hình ảnh bị tràn khỏi khung khi xem web trên các thiết bị có màn hình nhỏ rồi. Chúc các bạn thành công!

 

Related Post


Responsive like box facebook
Friday, October 4, 2013
Gần đây tôi có làm một website với giao diện responsive và trên trang có nhúng like box facebook, vấn đề ở đây tôi gặp phải là đoạn mã like box mà facebook cung cấp chỉ cho phép chèn chiều rộng (width) và chiều cao (height) là những con số cụ thể, chính vì vậy khi kích thước màn hình co dãn, giao diện responsive theo thì like box đó bị vượt khỏi khung trông rất thiếu thẩm mỹ.
Sử dụng jQuery Picture plugin tối ưu hóa hình ảnh cho web mobile.
Sunday, September 22, 2013
Như bài trước tôi có giới thiệu về jQuery Mobile - một bộ mã nguồn mở hỗ trợ xây dựng giao diện cho responsive rất chuyên nghiệp dành cho các thiết bị smartphone và máy tính bảng. Và việc tiếp theo các bạn sẽ phải quan tâm khi xây dựng được một web mobile ưng ý đó là tối ưu nó. Với các thiết bị di động thường hạn chế về tốc độ và dung lượng truy cập internet so với máy tính, vì vậy tối ưu dung lượng web sẽ là việc bạn sẽ cần làm tiếp theo. Ở bài này chúng ta sẽ sử dụng môt plugin rất nhỏ gọn là jQuery Picture, nó hỗ trợ chúng ta trong việc lựa chọn sử dụng hình ảnh theo tỷ lệ màn hình thiết bị một cách hợp lý nhất.
Search

Đăng ký nhận bài mới


Category

Blog Archive