Resize ảnh cho bài viết

Trong demo này mình resize ảnh theo chiều rộng là 250px; theo chiều cao là 220px; , Nếu muốn các bạn có thể chỉnh 2 chiều này cho bằng nhau. Và các ảnh này đều được giữ nguyên kích thước.

Lưu ý : để giữ nguyên kích thước ảnh khi resize thì trong thẻ img bạn không nên set sẵn kích thước của nó, ví dụ :

<img border="0" src="http://wallpapers.designdistributor.com/wallpaper/render_001-1920.jpg" width="400" height="250" />

- Nếu có dòng code im đậm trong thẻ img thì ảnh sẽ resize không giữ tỉ lệ, tức là resize theo 2 chiều.
- Nếu muốn giữ tỉ lệ mà trong code vẫn có dòng in đậm thì bạn chỉ nên set sẵn kích thước theo 1 chiều, và chiều đó phải là chiều có kích thước lớn hơn.
- Ví dụ ảnh có chiều rộng (width) dài hơn chiều cao (height) thì set theo chiều rộng:

<img border="0" src="http://wallpapers.designdistributor.com/wallpaper/render_001-1920.jpg" width="400" />

- Nếu ảnh có chiều cao (height) dài hơn chiều rộng (width) thì set theo chiều cao:

<img border="0" src="http://wallpapers.designdistributor.com/wallpaper/render_001-1920.jpg" height="250" />

- Và điều cuối cùng là nếu kích thước gốc của ảnh nhỏ hơn kích thước muốn resize thì ảnh không được resize.

Ảnh 1 (kích thước gốc là : 1,920px × 1,200px)

Hình này mình set sẵn chiều rộng là 400px, nhưng 
ảnh vẫn giữ tỉ lệ là do chiều rộng dài hơn chiều cao

 

Ảnh 2 (kích thước gốc là : 1,150px × 862px )

Hình này mình set sẵn chiều cao là 400px, và 
ảnh đã ko còn giữ đúng tỉ lệ (reszie cả 2 chiều) 
do chiều cao ngắn hơn chiều rộng.

 

Ảnh 3 (kích thước gốc là : 768px × 1,024px )

Hình này mình set sẵn chiều cao là 400px và 
ảnh vẫn giữ nguyên kích thước 

 

Ảnh 4 (kích thước gốc là : 150px × 130px )
Hình này không thể resize, do kích thước gốc
nhỏ hơn kích thước muốn resize