Sửa lỗi ảnh quá lớn tràn ra ngoài khung bài viết trong Blogger (Resize ảnh)

Khi các bạn làm Blogger có thể sẽ gặp phải lỗi kích thước ảnh qua lớn và vượt ra ngoài phần khung hiển thị bài viết trong Blog. có 2 cách giải quyết vấn đề này tương đối đơn giản.

 - Cách 1: Blogger cũng hỗ trợ công cụ resize ảnh bằng cách bạn sẽ chọn kích thước cho từng ảnh khi bạn đăng bài viết của mình giống như hình dưới.

Cách 2: rất đơn giản chỉ bằng 1 đoạn CSS, nó sẽ tự động resize những ảnh nào có kích thước lớn hơn khung hiển thị bài viết, và bạn không phải mất công chỉnh từng ảnh một khi viết bài.

Bước 1: Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard) > Bố cục (Layout) > Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm: ]]></b:skin> và đặt trước nó đoạn mã sau:

.post img { 
  max-width:500px; /* Chiều rộng lớn nhất của ảnh */
  max-height:400px; /* Chiều cao lớn nhất của ảnh */
}

Bạn có thể sửa lại giá trị của max-width và max-height cho phù hợp với blog của bạn. Còn nếu bạn muốn hình ảnh của bạn khi hiển thị ra có kích thước cố định là 500x400 thì các bạn để đoạn code sau

.post img { 
  width:500px; /* Chiều rộng của ảnh */
  height:400px; /* Chiều cao của ảnh */
}

Hoặc nếu bạn chỉ muốn resize cái ảnh nào có chiều rộng quá lớn thì chỉ cần để 1 giá trị là max-width hoặc width.

.post img { 
  max-width:500px; /* Chiều rộng lớn nhất của ảnh */
}

 hoặc

.post img { 
  width:500px; /* Chiều rộng của ảnh */
}

 Cái khác nhau giữa max-width và width ở đây là:
 - max-width thì chỉ resize những ảnh nào lớn hơn giá trị bạn chỉ định. (Khuyên dùng)
 - width là resize tất cả, kể cả ảnh nhỏ hơn giá trị bạn chỉ đinh, nó cũng sẽ phóng to ảnh nhỏ đó đến kích thước mà bạn muốn resize ảnh.
OK rôi, giờ chỉ cẩn lưu lại là xong.