Tự động resize hình vừa với kích thước của blog

Khi viết blog có kèm nhiều hình ảnh thì chắc hẳn các bạn đã từng trải qua vấn đề này phải không, khi chèn một hình ảnh vào bài viết mà bạn muốn nó được thấy rõ nhất thì hiển nhiên bạn cho nó ở Original size và kết quả là hình ảnh bị tràn ra ngoài bài post qua bên widget bên phải. Ở bài viết này mình xin chia sẻ với các bạn cách để tự động resize hình vừa khít với chiều rộng bài post

Rất đơn giản, bạn chỉ cần vào Template > Customize > Advanced

Paste đoạn code CSS sau vào ô trống và Save lại

.post-body img {  

 max-width: 100%;  

 max-height: auto;  

 display: block;  

 margin: auto;   

 }

Mở rộng, bạn có thể thêm một số thuộc tính sau để hiện ảnh không có viền và bóng thường thấy ở một số template

.post-body img {  

 max-width: 100%;  

 max-height: auto;  

 display: block;  

 margin: auto;   

 box-shadow: none;  

 border: none;  

 padding: 0px;   

 }

Lưu ý: Cách làm này chỉ có hiệu quả full hình trên blog khi bạn set size của nó là Original Size. Để cho hình full size với bất cứ tùy chọn nào (Small, Medium, Large...) bạn sử dụng đoạn CSS sau

.post-body img {  

 width:100%;  

 height:100%;  

 display: block;  

 }

Vậy là OK, bạn có thể yên tâm chèn hình với kích thước tối ưu nhất cho blog của mình, chúc các bạn thành công !