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 800px đượ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.
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 800px hiển thị hết (được điều chỉnh) trong phần bài viết với chiều rộng 500px.
Để 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ới chiều rộng của phần bài viết (Post section) là 500px.
Truy cập vào Blogger >> Layout >> Edit/Html
Chèn đoạn mã dưới:
.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;
padding : 10px;
clear: both;
}
vào trước tag ]]></b:skin>
Với đoạn mã bạn vừa thêm vào thì các bức ảnh có chiều rộng hoặc chiều cao lớn hơn 500px sẽ tự điều chỉnh về chiều rộng và chiều cao 500px, tương tự các bức ảnh có chiều rộng hoặc chiều cao nhỏ hơn 200px sẽ tụ động điều chỉnh về chiều rộng và chiều cao 200px.
Tuỳ thuộc vào chiều rộng của bài viết (Post sectôn) mà bạn thay đổi chiều rộng và chiều cao cho phù hợp
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à 500PX x 400PX 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;
}
hí hí, e có 1 bổ sung nhỏ cho bài của a Chinh.
ReplyDeletenếu để cả width và height thế thì chỉ áp dụng cho ảnh vuông thôi, còn e vẫn chèn thêm chỉ riêng max-width thôi là đủ, ko cần height đâu
cam on pika nhieu.
ReplyDeletehi thanks anh đễ em thữ cho blog mình ^^
ReplyDeleteTheo mình tốt nhất nên edit lại là
ReplyDelete.post img {
max-width:500px;
padding : 10px;
clear: both;
}
vì nhiều khi trong bài post có ảnh logo hay icon nếu để chế độ min là 200 e là bất tiện
Cám ơn Bar nhé, cách thức bạn đưa ra là hợp lý nhất.
ReplyDeleteĐã làm mà vẫn không được. Nó vẫn tràn ảnh ra ngoài bác Admin giúp cái ạ!
ReplyDeleteBạn làm như thế nào, cái này làm sao mà không làm được.
ReplyDeletebạn làm them comment của bẩ đóa:
Theo mình tốt nhất nên edit lại là
.post img {
max-width:500px;
padding : 10px;
clear: both;
}