Jquery tự động thay đổi kích thước ảnh theo kích thước màn hình

Chủ nhật - 18/09/2016 06:14
<div class="content">
  <img src="URL" />
</div>
function fix_image_content(){
	var news = $('.content'), newsW, w, h;
	if( news.length ){
		var newsW = news.innerWidth();
		$.each($('img', news), function(){
			if( typeof $(this).data('width') == "undefined" ){
				w = $(this).innerWidth();
				h = $(this).innerHeight();
				$(this).data('width', w);
				$(this).data('height', h);
			}else{
				w = $(this).data('width');
				h = $(this).data('height');
			}

			if( w > newsW ){
				$(this).prop('width', newsW);
				$(this).prop('height', h * newsW / w);
			}
		});
	}
}

$(window).load(function(){
	fix_image_content();
});

$(window).on("resize", function() {
	fix_image_content();
});
Sử dụng
var news = $('.content'), newsW, w, h;
Thay đổi .content bằng element của bạn.

Thay đổi kích thước trình duyệt để xem kết quả.

Tác giả bài viết: Hồ Ngọc Triển

Nguồn bài viết: developers.mynukeviet.net

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Thống kê truy cập
  • Đang truy cập14
  • Hôm nay193
  • Tháng hiện tại5,977
  • Tổng lượt truy cập72,860
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây