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

34 bài viết.
199 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 hơn 4 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 3 năm trước
19 9
White
18 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 4 năm trước
18 4
Bài viết liên quan
White
36 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết 4 năm trước
36 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
199 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á!