Responsive thay đổi image

Thỉnh thoảng có những design, hình ảnh trên PC và SP sẽ khác nhau, ví dụ như hình trên PC lớn hơn, nội dung text xem trên PC rõ, nhưng khi xem trên SP lại rất nhỏ, khi đó designer sẽ thiết kế một image khác, với nội dung text lớn hơn dành riêng cho SP.

Trường hợp này, ta có thể lựa chọn sử dụng background-image thay thế cho image, nhưng đôi lúc bắt buộc cần phải sử dụng <img>.

Giải pháp ở đây có nhiều cách, như sử dụng Javascript, CSS, HTML, ..., trong phạm vi bài học này, Học Web Chuẩn sẽ giới thiệu tới các bạn 2 cách đơn giản mà rất hiệu quả đó là dùng tag HTML <picture> và CSS.

Responsive thay đổi image với <picture>

Cách này sử dụng hiệu quả, tuy nhiên chỉ dùng được cho những trình duyệt mới nhất gần đây.

<picture>
    <source media="(min-width: 1025px)" srcset="img_red.jpg">
    <source media="(min-width: 641px)" srcset="img_blue.jpg">
    <img src="img_green.jpg" alt="">
</picture>

• media="(min-width: 1025px)": nội dung này chỉ hiển thị cho thiết bị có màn hình lớn hơn 1024px.
• media="(min-width: 640px)": nội dung này chỉ hiển thị cho thiết bị có màn hình lớn hơn 640px.
• <img>: sẽ hiển thị image này, nếu không thỏa các điều kiện trên, tức là màn hình nhỏ hơn 640px.

Nội dung trên sẽ cho ta kết quả sau:

Click xem ví dụ responsive thay đổi image để xem kết quả.

Responsive thay đổi image với CSS

Thay vì dùng media như trên, ta có thể sử dụng CSS để thay thế, cách làm này nhỏ gọn, tiện lợi, tuy nhiên nếu lạm dụng nhiều sẽ khiến cho trang HTML nặng nề hơn, hiệu quả load page cũng kém đi.

Cách làm là ta sử dụng các class khác nhau để điều khiển ẩn hiện các hình khác nhau, cách này không những sử dụng cho image mà còn sử dụng cho nhiều thành phần khác nhau, ta làm như sau:

HTML viết:

<img src="img_red.jpg" alt="" class="pc">
<img src="img_blue.jpg" alt="" class="tablet">
<img src="img_yellow.jpg" alt="" class="sp">

CSS viết:

/* Hiển thị cho PC, nên tablet và SP sẽ ẩn */
@media only screen and (min-width: 1025px) {
    .tablet, .sp {
        display: none;
    }
}

/* Hiển thị cho tablet, nên PC và SP sẽ ẩn */
@media only screen and (max-width:1024px) and (min-width: 641px) {
    .sp, .pc {
        display: none;
    }
}

/* Hiển thị cho SP, nên tablet và PC sẽ ẩn */
@media only screen and (max-width: 640px) {
    .pc, .tablet {
        display: none;
    }
}

Cách ghi là PC, SP, Tablet chỉ mang tính chất tượng trưng, vì hiện tại có rất nhiều điện thoại có chiều rộng lớn hơn cả Tablet, tuy vậy cách ghi trên cũng không ảnh hưởng gì vì nội dung vẫn hiển thì đúng, tốt hơn việc xử lý cho từng thiết bị riêng biệt (như xử lý cho từng thiết bị: Samsung Galaxy, iPhone 5S, iPhone 6Plus, iPad, Google Nexus, ...) vừa mất thời gian, vừa không bao quát hết các trường hợp.

Click ví dụ responsive thay đổi image bắng CSS để xem kết quả.

Xem kết quả sẽ cho ta thấy:

• Với màn hình lớn hơn 1025px sẽ ẩn class="tablet" và class="sp", khi này sẽ chỉ còn image img_red.jpg.
• Với màn hình lớn hơn 640px và tới max 1024px sẽ ẩn class="pc" và class="sp", khi này sẽ chỉ còn image img_blue.jpg.
• Với màn hình từ 640px trở xuống sẽ ẩn class="tablet" và class="pc", khi này sẽ chỉ còn image img_yellow.jpg.