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.
164 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 gần 3 năm trước
21 8
White
18 7
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 hơn 1 năm trước
18 7
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 hơn 2 năm trước
15 4
Bài viết liên quan
White
17 7
(Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) Like status gốc để hóng phần 2 nhé :P. (Link)
Huy Hoàng Phạm viết 1 năm trước
17 7
White
10 5
Bạn nhìn hình dưới đây, nếu app của bạn xuất hiện nhiều khối blockgrid thế này thì mình nghĩ bạn nên viết nó thành 1 component CSS. Trong phần này...
My Mai viết gần 3 năm trước
10 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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