Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Thursday, February 24, 2011

Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger

Rất nhiều Blog gặp phải lỗi kích thước ảnh tràn ra ngoài phần hiển thị bài viết trong Blog. Giải quyết triệt để vấn đề này tương đối đơn giản bằng dòng lệnh trong CSS.

Chia sẻ:
Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Rất nhiều Blog gặp phải lỗi kích thước ảnh tràn ra ngoài phần hiển thị bài viết trong Blog. Giải quyết triệt để vấn đề này tương đối đơn giản bằng dòng lệnh trong CSS.
- Trước hết, các bạn xem xét các lỗi mắc phải với kích thước ảnh hiển thị trong bài viết:
1. Chiều rộng bức ảnh 900px được rút ngắn chiều rộng để phù hợp với chiều rộng 500px của bài viết, phần còn lại của bức ảnh bị ẩn không hiển thị.
2. Hiển thị ảnh độ rộng 800px bị tràn ra khỏi phần độ rộng 500px của bài viết.
Xem demo:   VIew Demo
Ảnh minh họa khi ảnh bị trang ra phần sidebar:
Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Như 2 lỗi hiển thị trên, để bức ảnh hiển thị chính xác và không làm mất (ẩn) phần nào của bức ảnh như hình minh hoạ dưới: Toàn bộ nội dung bức ảnh có độ rộng 900px hiển thị hết (được điều chỉnh) trong phần bài viết với chiều rộng 500px.
Xem demo:   VIew Demo
Ảnh minh họa sau khi chỉnh sủa:
Sửa lỗi ảnh tràn ra ngoài khung bài viết trong Blogger
Để chúng tự động điều chỉnh hiển thị phù hợp với phần nội dung bài viết các bạn làm như sau: (Ví dụ với chiều rộng của phần bài viết (Post section) là 500px.)

Truy cập vào blogger

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed):

Điều chỉnh kích thước min và MAX của ảnh hiển thị trong Blogger:

4- Để cố định hình ảnh hiển thị trong blogger, với 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, bạn đặt trước ]]></b:skin> đoạn mã sau:
.post img {      
max-width:500px;       
min-width:200px;       
padding : 10px;       
clear: both;       
}
- Điều chỉnh lại max-withmin-with cho phù hợp với phần bài đăng của bạn nha.
5- Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500 x 400 thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img {      
width:500px;       
height:400px;       
padding:10px;       
}
- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.
Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML (Edit/Html) và chỉnh sửa chúng.

32 nhận xét:

  1. Mình muốn ảnh kích cỡ nhỏ hơn thì giữ nguyên thì thế nào nhỉ

    ReplyDelete
  2. dung cách 2 thì máy cái icon nó cũng lên theo á á

    ReplyDelete
  3. @everytime Cách 2 bạn để min nhỏ thôi chẳng hạn:
    .post img {
    max-width:500px;
    min-width:10px;
    padding : 10px;
    clear: both;
    }
    Bạn có thể để min-width:10px; nhỏ hơn nữa, còn phần max-width:500px; Bạn cho bằng độ rộng của Blog bạn thôi. Ví dụ trong bloc mình phần bài viết rộng 520 px thì mình để max-width:510px; thì mình được như sau:
    .post img {
    max-width:510px;
    min-width:10px;
    padding : 10px;
    clear: both;
    }
    Chúc thành công!

    ReplyDelete
  4. @everytimeCách 2 bạn để min nhỏ thôi chẳng hạn:
    .post img {
    max-width:500px;
    min-width:10px;
    padding : 10px;
    clear: both;
    }
    Bạn có thể để min-width:10px; nhỏ hơn nữa, còn phần max-width:500px; Bạn cho bằng độ rộng của Blog bạn thôi. Ví dụ trong bloc mình phần bài viết rộng 520 px thì mình để max-width:510px; thì mình được như sau:
    .post img {
    max-width:510px;
    min-width:10px;
    padding : 10px;
    clear: both;
    }
    Chúc thành công!

    ReplyDelete
  5. @Fairstar Ẹc bác Amin đang Online ak mà sao trả lời nhanh thế. :))

    ReplyDelete
  6. @Unknown Uk hôm nay dành thời gian giải đáp hết các thắc mắc của các bạn :)
    Giờ mình đi ăn cơm đã đói lắm rồi :P
    Chúc mọi người ăn cơm vui vẻ :))

    ReplyDelete
  7. @Fairstar Em ăn cơm rồi giờ sắp ra nề kè kè :)) :))
    Chúc bác ăn ngon miệng, nhanh quay lại em nhờ tý việc nha.

    ReplyDelete
  8. @Unknown Ok! bye bye! See you again after 30 minuter :))

    ReplyDelete
  9. Em làm mà sao không được vậy anh hình ảnh em to ra thêm nữa??

    ReplyDelete
  10. @Phước Nhóc Em dung đoạn code này:

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

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  12. Mỗi template có chiều rộng khác nhau, sử dụng % trong trường hợp này là hữu ích hơn cả
    1.Vào Blogger > Mẫu > Tùy Chỉnh > Nâng Cao > Thêm CSS (xem video hướng dẫn)
    2.Dán code sau vào khung CSS
    .post img {max-width:98% !important}

    ReplyDelete
    Replies
    1. Dùng % cũng được nhưng trên một vài trình duyệt cũ nhìn rất kỳ. Với lại mình dùng pixcel nhằm cố định ảnh cho thủ thuật thứ 2 :)

      Delete
    2. Mình ghé những trình duyệt cũ >"< , khó hiểu hơn là tại sao vẫn có những người còn dùng những trình duyệt như thế @@

      Delete
    3. Khi nào còn có người dùng hệ điều hành Win SP1, SP2, SP3 và những máy cấu hình thấp thì vẫn còn những hệ điều hành thời thượng cổ tồn tại :) VÌ Win SP không thể cài dược IE 8 hoặc cao hơn.

      Delete
    4. Thank nhé cái này tuy không cố định ảnh nhưng nó hợp với blog của mình còn cái trên như bạn namkna nói kia thì blog mình bị lỗi icon ngoài trang chủ cũng bị to ra

      Delete
  13. thanks . tôi thì tôi bõ luôn cái này đi min-width:200px;

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete

  15. ANH ƠI KHI LƯU THÌ NÓ GẶP LỖI NÀY LỖI NÀY

    ReplyDelete
    Replies
    1. Thủ thuật này không gây ra lỗi đó đâu. Lỗi đoa là do trong template của em xuất hiện 2 tiện ích label có id là label1 em load lại trang và làm lại sẽ oke.

      Delete
  16. vâng - em làm được rồi ạ
    thanks anh !

    ReplyDelete
  17. Nam ơi, cái thứ 4: .post img {
    max-width:500px;
    min-width:200px;
    padding : 10px;
    clear: both;
    }

    1. Nếu mình điều chỉnh cả max và min = 500 để tất cả nhỏ to đều về 500 liệu được không?

    2. Cái Padding = 10 mình chuyển bằng 0 (vì cái ảnh có chú thích và ko chú thích nó bị lệch lề) có được ko bạn?

    3. Trong trường hợp mình ko làm theo bạn mà theo mặc định templale của mình thì ảnh chú thích và ko chú thích bị lệch nhau 10px (vậy mình vào chỗ nào để chuyển nó về = 0)

    Nam xem và giúp mình nhé.

    4. "Tem" của mình không hiểu cài cái gì mà sau khi "định dạng mẫu" thì không lưu được bố cục vì nó báo lỗi. Nguyên nhân vì cái gì Nam kiểm tra giúp để mình xóa nó đi. Có lần mình phát hiện nguyên nhân do mình để mobile = 'yes' nhưng xóa đi vẫn vậy.

    ReplyDelete
    Replies
    1. 1. Tất nhiê nlà đươc tuy nhiên có một vấn đề là trong bài viết của bạn nếu sử dụng một số icon như những hình mặt cười, hình mũi tên, ngôi sao,.. thì những hình này cũng bị phóng to lên mức 500px đó.

      thuộc tính padding bạn có thể chỉnh bằng 0 hoặc bỏ đi cũng không sao, thuộc tính này để căn hình ảnh so với lề 4 phía bao nó. Nếu bạn chỉnh về 0 thì khi đăng ảnhe ếu bạn không enter hình ảnh lùi xuống một dòng nó sẽ sát với dòng chữ bên trên và bên dưới; thêm nữa nếu hình ảnh không căn giữa nó sẽ sát với lề phải hoặc trái.

      3. Bạn vào mẫu tìm thuộc tính padding trong các thẻ có dạng .... img{....} và chỉnh nó nha.

      4. Lỗi đó mình đã có bài viết hướng dẫn khắc phục rồi bạn xem tại đây: Sửa lỗi không thể chỉnh sửa, di chuyển wiget trong layout blogspot

      Delete
  18. blog của bạn bây giờ thật tuyệt vời

    ReplyDelete
  19. cho mình hỏi chút nhé blog mình http://www.haiphongplus.com/ khi áp dụng code này thì ảnh thumbai của các bài đăng ngoài trang chủ cũng bị to ra ko còn size 90x90 nữa , một cái là .postthumb một cái là .post img 2 cái này chạy giống nhau à bạn

    ReplyDelete
  20. đã tự sửa vấn đề trên, cho mình hỏi có code nào để auto xóa 1 ảnh hoặc ẩn link ảnh nào đó cho cả blog ko bạn, vì blog mình có dùng icon cây bút đầu dòng nguồn bài viết giờ bị to ra 90x90

    ReplyDelete
  21. cảm ơn bạn rất nhiều mình đã làm được :)

    ReplyDelete
  22. Làm sao biết ảnh blog có đọ rộng và độ cao như thế nào?

    ReplyDelete
  23. Lâu rồi không biết Nam Kna còn xài blog này không, xem giúp mình mấy site sau 3 năm dán code

    .post img {
    width:550px;
    height:auto;
    padding:0px;
    }

    chạy ngon lành, các ảnh căn về 1 size cố định cân xứng, vài ngày nay khi xem trên mobile nó bị tràn ra ngoài hết, không theo kích thước màn hình điện thoại, mình chưa tìm ra nguyên nhân do cái gì, tất cả blog đều bị, có phải do mạng ko load ảnh hay do Blogspot update cái gì

    Demo: Blog

    ReplyDelete