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.
208 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 5 năm trước
21 8
White
20 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 4 năm trước
20 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 gần 5 năm trước
18 4
Bài viết liên quan
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết 2 năm trước
0 2
White
3 0
Nếu team cắt HTML/CSS của bạn chưa có một tiêu chuẩn chung nào để làm việc hợp rơ với nhau thì hãy thử qua (Link) (Block, Element, Modifier). Nếu ...
Đinh Viễn viết 1 năm trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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