Mình bận quá chưa có thời gian soi xem nguyên nhân vì sao, khoảng vài ngày nay các ảnh của mình khi xem trên mobile bị tràn khung hết, trước thì mặc định co vào vừa vặn màn hình cực đẹp Trên desktop thì ko sao. Lâu nay mình có xài code fix tất cả ảnh về cùng 1 size auto cho đẹp. Bạn nào kiểm tra được chia sẻ mình nguyên nhân và cách fix với nhé Mình đã nhanh chóng tìm ra lỗi. Trước mình dán đoạn code này .post img { width:620px; height:auto; padding:0px; } Không hiểu Google update gì mà ảnh bị tràn khung trên mobile. Tìm trêm mạng thấy đoạn code này mình dán thêm vào thì khỏi: .post img {max-width:100% !important} Mình ko rành code, bạn nào cho hỏi code đó có xung nhau ko?
Chào bạn! Mình sẽ giải thích sơ qua code của bạn nhé. Code bạn là CSS .post là class mang tên post img là thẻ img .post img là những thẻ img lằm trong div có class là post Như vậy với width:620px nghĩa là những hình ảnh trong class post sẽ có kích thước là 620px. Tuy nhiên màn hình di động kích thước là 320px 360px, máy tính bản là 768px... vậy trên di động hình bạn lớn hơn mà hình => lỗi. Bạn fix bằng việc thêm max-width:100% !important . Important dùng để ưu tiên thuộc tính kèm theo nó. Nếu bạn muốn thân thiện trên di động, bạn nên tìm hiểu thêm css co giãn theo màn hình ví dụMã:@media (max-width:768px){ .... }Những đoạn code trong {} chỉ có tác dụng khi màn hình nhỏ hơn 768px Còn nữa, bạn nên hạn chế việc dùng giá trị tuyệt đối cho hình ảnh. Vì khi gặp trường hợp như hình 300px, bạn để width:700px sẽ là hình zoom lên.
đọc bài của bác làm em nhớ tới ngày xưa, lần đầu làm cái blog có slide nên phải căn hình cho nó phù hợp, ko rành về code gì nhưng mày mò cũng hiểu được là tìm cái chữ width chỉnh chỉ số nó thành 100% là ok
Không để giá trị tuyệt đối có nghĩa là để % sẽ tốt hơn hả bác? Mình ko biết làm thế nào nhưng hiện tại khi dán nguyên đoạn code trên vào thì xem trên điện thoại, xoay dọc hay ngang ảnh đều auto co giãn cực vuông theo điện thoại. Ý mình là trước mình chỉ xài đoạn code 1 thì cả mobile và desktop đều co giãn ảnh kiểu responsive mà vài ngày nay tự nhiên nó mất reponvise ảnh trên mobile, ko hiểu blogger họ có up cái gì
Nếu nó không bị lỗi mà hình là được rồi. Còn sung đột thì không, CSS sẽ lấy ưu tiên importat. Còn chi tiết phụ thuộc vào từ trang, và mục đích. Việc này mình nghĩ không do blogger đâu mà do trình duyệt bạn truy cập đó. Bạn inbox mình trang đó mình check lại thử cho.
Blog của mình cũng bị y như bác này mà thêm code .post img {max-width:100% !important} vẫn không ăn thua. Mình ko phải dân code nên cũng bó tay, bác có thể xem giúp mình với được không bác vinawebseo
Cái này mình cũng gặp nhiều rồi một phần do code của web chưa cấu hình chuẩn thôi. mặt khác cũng do hình ảnh quá lớn nữa. cũng giống như ý kiến mà các bác đóng góp phía trên đều hợp lý cả.
Khi code thì tất cả các ảnh nên để width theo % hoặc bạn để max-width = 100% là đc thôi. Nếu để theo width theo % thì để height = auto cho nó đẹp
