Ảnh blog bị vỡ khung

Câu hỏi

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ưa có câu trả lời tốt nhất 0
vannguyenx 3 tháng 1 Trả lời 60 lượt xem 0

Câu trả lời ( 1 )

  1. 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.

Trả lời