Tự động resize ảnh trong nội dung bài viết

Khi bạn đăng 1 ảnh lên blog hoặc diễn đàn bạn sẽ gặp ngay phải vấn đề đó là ảnh của bạn quá to so với
kích cỡ nội dung của blog diễn đàn đó dẫn đến ảnh sẽ bị “chửa” ra ngoài nhìn rất mất thẩm mĩ hoặc tệ hơn
là một phần của bức ảnh sẽ “bị mất” do phần tử cha được gán overflow:hidden

Để giải quyết vấn đề này nếu bạn là Webmaster bạn cần phải sử lý:

1. Đưa ảnh về đúng kích cỡ
2. Giữ lại Aspect Ratio (tỷ lệ) của bức ảnh đó để ảnh không bị méo

bạn có thể code css như sau:

Tại thẻ div Container (chứa ảnh) viết cho thẻ img

divContainer img {

    max-width: 550px;

    height: auto !important;

    width: expression(this.width > 550 ? 550: true);

}

max-width: 550px chiều rộng tối đa của ảnh là 550px
height: auto tự động co giãn chiều cao để phù hợp với tỷ lệ bức ảnh

 

Hoặc để đơn giản như  sau:

 

#divContainer img {
max-width: 95%;

}

Để ở 95% vì không muốn hình ảnh đầy form, gây xấu, các bạn có thể để 100% tùy vào nhu cầu

Như vậy khi đưa lên bất kỳ ảnh nào trong thẻ div Container sẽ bị resize về cỡ 550px tuy nhiên code trên mới
chỉ chạy được trên: Firefox 3.0 trở lên, Opera 10, IE 7 trở lên, Google Chrome, Safari 4

IE 6 không hỗ trợ.