Sửa lỗi ảnh tràn ra ngoài khungbài viết Blogspot

Trong một số mẫu blogspot có nhược điểm khi bạn đăng tải các hình ảnh kích thước lớn với hình ảnh gốc thì hình ảnh của bạn sẽ bị tràn ra khỏi bài viết phá vỡ bố cục trang blog của bạn. Vậy phải làm thế nào để các hình ảnh có thể tự động resize cho vừa với bố cục trang của bạn. Bài viết này mình sẽ hướng dẫn các bạn từng bước để có thể trả lời câu hỏi trên.

Hướng dẫn chi tiết cách sửa lỗi hình ảnh to tràn ra khỏi khung bài viết trong Blogspot:

1. Đăng nhập Blog

2. Vào Mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Tìm thẻ đóng ]]></b:skin> rồi  chèn trước đoạn mã sau đây:

* Sử dụng giá trị tương đối, mình đánh giá phương pháp này bởi ảnh sẽ hiển thị tốt trên các trình duyệt của điện thoại, máy tính bảng,... nói chung hợp cho các blog thiên về giao diện responsive

.post img {max-width:98% !important}

- Bạn có thể sửa lại giá trị 98% cho phù hợp nếu như ảnh vẫn tràn thì sửa nhỏ hơn đi.
* Ngoài ra bạn có thể sử dụng đoạn code sau:

.post img {      
max-width:500px;       
min-width:200px;       
padding : 10px;       
clear: both;       
}

- Với đoạn code trên thì hình ảnh  to hơn giá trị max thì sẽ tự động điều chỉnh về giá trị max, nếu ảnh nhỏ hơn giá trị min thì sẽ tự điều chỉnh về kích thước min, nhược diểm của đoạn code này là một số icon cảm súc hay logo nhỏ sẽ bị resize lên 200px do vậy nếu có sử dụng những icon và logo bạn hãy sửa giá trị 200 px nhỏ xuống (10px) chẳng hạn.
5. Lưu mẫu của bạn lại và kiểm tra kết quả nhé.