Tạo ảnh thumbnail (Image resizing) bằng jQuery

09/02/2017

Mặc dầu chúng ta có thể tạo ảnh thumbnail trên phần server (sử dụng PHP và GD) nhưng cũng có nhiều trường hợp chúng ta sẽ cần dùng đến đoạn jQuery sau đây để thu nhỏ ảnh. Nếu các bạn muốn biết tạo ảnh thumbnail bằng PHP thì có thể tham khảo bài viết
Hướng dẫn resize image (thu nhỏ ảnh) đơn giản với PHP.

Các bạn copy đoạn code bên dưới và dán vào trang mà các bạn muốn ảnh tự động thu nhỏ khi duyệt.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
});

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !