resize Ảnh trong bài viết

Khi copy bài và chèn vào trong bài viết khi chèn ảnh thì hình ảnh thường bị lố ra, do dùng cách chèn HTML và Ảnh thường lớn quá, vì thế để cho ảnh nằm trong khung gọn đẹp thì thực hiện một chút về CSS trong giao diện là ổn.

có thể khi chèn ảnh vào bài viết nên chỉnh độ rộng và chiều cao theo HTML khi chèn. Tuy nhiên khi chép bài từ các nơi khác về thì làm điều này rất là mất công và chỉ những người hiểu tí về HTML mới làm được, còn người sử dụng bình thường thì hơi khó. Thôi thì làm tự động luôn vậy.

Xem ví vụ trước khi chỉnh sửa nè:

ý tưởng: do hình ảnh hiện không đúng bề ngang nên cần chỉnh css cho max-width của tag img nó trong khung là đẹp nhất.

cách thực hiện:

dùng firebug thấy được là phần bài viết nằm trong class node-content chưa có định nghĩa nào riêng cho img nên phải xử thằng này.

Vây đây là thể hiện bài viết của node thường nằm ở trang page nên mình cần phải chỉnh cho phần CSS trong phần này. Ở giao diện của mình nó nằm ở file page.css vào đây tìm node-content xem đã có định nghĩa chưa có thì sửa lại nếu chưa thì thêm vào

.node-content img{
 
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}

ở đây chủ yếu là thuộc tính max-width. tôi cho 500px để nó resize lại còn 500px thôi. độ rộng này bao nhiêu thì tùy site của bạn.

Sau khi lưu lại thì thử lại web nó được như thế này

chúc các bạn thành công

hoaiphan.com (chú ý ghi rõ nguồn khi trích dẫn)