Load image cho các loại màn hình khác nhau

Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng <img> tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ làm thế nào?
Mình thấy có một số bạn sử dụng show, hide element. Theo mình đó là cách làm không tốt đối với Responsive.
Mình sẽ hướng dẫn các bạn một cách làm của mình:
HTML:

<img class="image" alt="">

CSS

@media only screen and (max-width: 640px) { 
  .image {
    content: url('image-small-screen.jpg')
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  .image {
    content: url('image-medium-screen.jpg')
  }
}

@media only screen and (min-width: 1024px) { 
 .image {
    content: url('image-large-screen.jpg')
  }
}

Xong rồi đó, các bạn hãy áp dụng thử xem.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

33 bài viết.
177 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết 3 năm trước
21 8
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết gần 2 năm trước
19 9
White
15 4
Khi sử dụng các app như viber hay zalo... chúng ta sử dụng số điện thoại của mình để tạo tài khoản, sau khi nhập số điện thoại vào sẽ có một SMS gử...
My Mai viết gần 3 năm trước
15 4
Bài viết liên quan
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
White
6 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết 3 năm trước
6 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
33 bài viết.
177 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!