Mình tạo logo cho website nhưng sử dụng 2 image khác nhau cho mobile và pc. Nên sử dụng cú pháp css Mã: <img alt="TH Vinasun" class="img-responsive-logo"> .img-responsive-logo { content: url('https://thvinasun.vn/wp-content/themes/vinasun/images/logo-thvinasunvn.png'); }Xong trên chrome logo hiển thị ngon lành, firefox không hiển thị, safari chưa thử. Vậy có cách nào khắc phục cho cả firefox không nhỉ.
Bạn nên thay thế HTML là 1 thẻ div, span,.. đừng dùng thẻ img vì đây là thẻ đơn, content có thể bị lỗi
<!DOCTYPE html> <html> <head> <style> p:before { content: url(url ảnh); } </style> </head> <body> <p></p> </body> </html> Đừng sử dụng thẻ img nha bạn.
Dùng đúng chuẩn responsive bằng cách @media (min-width: px) đi cho khỏe, làm như cách trên làm gì cho phức tạp bạn.
cậu tạo 2 div ra 1 div cho mobile tablet 1 div cho pc, sau đó dùng thuộc tính @media(max-width: ...px) để xử lý là tốt nhất, chứ tạo ra như vậy nó phức tạp
