Tự động co hình ảnh cho vừa với chiều rộng của trang - tránh tình trạng tràn trang trong Blogger

Nếu bạn chèn một hình quá lớn vào trang có khung trung bình thì tình trạng bì tràn ra khỏi khung của trang sẽ làm mất đi vẻ thẫm mỹ. Bài viết sẽ hướng dẫn bạn cách tự động co chiều rộng của hình sao cho vừa với trang nhất.

Bài viết tham khảo từ trang HelpBlogger và có nói thêm một số ý. Chỉ dùng CSS nên tốc độ load trang sẽ không bị ảnh hưởng.

〉Bạn có biết blogger cũng có sẵn chế độ tự co hình?

Mỗi khi bạn upload một hình trong bài viết thì khi nhấn vào hình ấy, bạn sẽ thấy giống như hình dưới

Tuy nhiên theo như các tuỳ chọn có sẵn "Nhỏ - Trung bình - Lớn - Rất Lớn" thì mỗi cái đều có một kích thước cụ thể, khi ấy có thể kích thước ấy không phù hợp với trang của bạn. Ví dụ, cái Lớn có kích thước là 400px (ví dụ thôi chứ không phải số này), trong khi trang bạn là 500px, suy ra còn 100px sẽ bị dư ra trông hơi xấu. 

Bạn muốn hình vừa khít chiều rộng trang luôn thì làm sao? Bạn sẽ chọn "Kích thước ban đầu"? Không! Chọn cái này nó sẽ giữ nguyên kích thước của hình cho bạn, ví dụ hình bạn up lên có kích thước 900px thì nó vẫn giữ y như thế trong khi trang của bạn rộng tối đa có 500px thôi, khi ấy hình sẽ bị lấn ra ngoài tới hơn phân nửa. Trang cũng sẽ bị méo theo!

Bài viết này là lựa chọn tối ưu nếu bạn muốn thoải mái up hình mà vẫn có được chiều rộng hình ĐÚNG BẰNG chiều rộng trang.

〉Cách làm

Điều cần lưu ý, sau khi bạn làm thủ thuật này, tất cả các hình trong quá khứ nếu bạn để chế độ "Kích thước ban đầu" sẽ bị ảnh hưởng theo.

Bước 1. Tìm đến dòn code sau

]]></b:skin>

Bước 2. Dán vào TRƯỚC nó đoạn code sau

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

Bước 3. Cách dùng. Sau mỗi lần upload hình lên, bạn chọn "Kích thước ban đầu".

Đoạn code ở Bước 2 chỉ có tác dụng cho những ảnh bạn đã chọn "Kích thước ban đầu", nếu bạn chọn những cái khác ví dụ như "Lớn" hay "Trung bình" thì đoạn code không có tác dụng. Thay vào đó, bạn vẫn muốn thay đổi cả những hình mà khi trước bạn đã chọn "Lớn" hay "Trung bình" này thì ở Bước 2 dùng đoạn code sau đây

.post-body img {
width:100%;
height:100%;
display: block;
}