jQuery - thay đổi kích thước hình ảnh để phù hợp với div

Question

Tôi có số lượng thay đổi về chiều cao và chiều rộng và mong muốn các hình ảnh của tôi được tự động thay đổi kích cỡ để lấp đầy các div này 100%, và sau đó là trung tâm khóa học.

Hiện tại, hình ảnh của tôi được đặt thành chiều rộng 100% và sau đó sử dụng jQuery bên dưới làm trung tâm, nhưng điều này chỉ hoạt động cho những hình ảnh có chiều cao lớn hơn div đã được thay đổi kích thước .. làm cách nào để làm cho nó 100% cho cả hai chiều cao và chiều rộng và trung tâm cũng .. hoàn toàn làm đầy div (ngay cả khi điều này có nghĩa là kéo dài hình ảnh)!

Cảm ơn.

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var top_margin = -(img_height/2); 
    $(item).css({ 
     'top': '50%', 
     'margin-top': top_margin 
    }); 
}); 

Answer 1

Sử dụng CSS để đặt cả chiều rộng và chiều cao của hình ảnh thành 100% và hình ảnh sẽ tự động được kéo dài để lấp đầy div chứa, mà không cần jquery.

Ngoài ra, bạn sẽ không cần phải căn giữa hình ảnh vì nó đã được kéo dài để lấp đầy div (được căn giữa với số không lề).

HTML:

<div id="containingDiv"> 
    <img src=""> 
</div> 

CSS:

#containingDiv{ 
    width: 200px; 
    height: 100px; 
} 
#containingDiv img{ 
    width: 100%; 
    height: 100%; 
} 

Bằng cách đó, nếu người dùng của bạn Javascript bị vô hiệu, hình ảnh sẽ vẫn được kéo dài để lấp đầy div toàn bộ chiều rộng/chiều cao.

HOẶC

Cách JQuery (SHRINK/căng khít tới - BAO GỒM khoảng trắng):

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var div_height = $(item).parent().height(); 
    if(img_height<div_height){ 
     //IMAGE IS SHORTER THAN CONTAINER HEIGHT - CENTER IT VERTICALLY 
     var newMargin = (div_height-img_height)/2+'px'; 
     $(item).css({'margin-top': newMargin }); 
    }else if(img_height>div_height){ 
     //IMAGE IS GREATER THAN CONTAINER HEIGHT - REDUCE HEIGHT TO CONTAINER MAX - SET WIDTH TO AUTO 
     $(item).css({'width': 'auto', 'height': '100%'}); 
     //CENTER IT HORIZONTALLY 
     var img_width = $(item).width(); 
     var div_width = $(item).parent().width(); 
     var newMargin = (div_width-img_width)/2+'px'; 
     $(item).css({'margin-left': newMargin}); 
    } 
}); 

Cách JQuery - CROP để phù hợp (NO khoảng trắng):

$('img.shelf-img').each(function(i, item) { 
    var img_height = $(item).height(); 
    var div_height = $(item).parent().height(); 
    if(img_height<div_height){ 
     //INCREASE HEIGHT OF IMAGE TO MATCH CONTAINER 
     $(item).css({'width': 'auto', 'height': div_height }); 
     //GET THE NEW WIDTH AFTER RESIZE 
     var img_width = $(item).width(); 
     //GET THE PARENT WIDTH 
     var div_width = $(item).parent().width(); 
     //GET THE NEW HORIZONTAL MARGIN 
     var newMargin = (div_width-img_width)/2+'px'; 
     //SET THE NEW HORIZONTAL MARGIN (EXCESS IMAGE WIDTH IS CROPPED) 
     $(item).css({'margin-left': newMargin }); 
    }else{ 
     //CENTER IT VERTICALLY (EXCESS IMAGE HEIGHT IS CROPPED) 
     var newMargin = (div_height-img_height)/2+'px'; 
     $(item).css({'margin-top': newMargin}); 
    } 
}); 

Answer 2

Nếu bạn muốn giữ tỷ lệ hình ảnh, tôi sẽ đặt max-height và max-width thành 100%. Here's một mẫu để hiển thị cách hoạt động. Điều đó có hiệu quả sẽ thu nhỏ hình ảnh lớn hơn div, nhưng nó sẽ giữ tỷ lệ khung hình.

Đối với hình ảnh nhỏ hơn div, bạn sẽ phải mở rộng với JavaScript. Các thuật toán cơ bản là như vậy:

1. Tìm các tỉ lệ của hình ảnh (chiều rộng/chiều cao)
2. Tìm tỷ lệ khía cạnh của div (chiều rộng/chiều cao)
3. Nếu tỉ lệ của hình ảnh là ít hơn của div, thiết lập của hình ảnh height để 100%
4. Nếu tỉ lệ của hình ảnh là lớn hơn của div, thiết lập của hình ảnh width-100%
5. Cho dù chiều hướng không được thiết lập, thiết lập nó để auto

Rõ ràng, bạn có thể sử dụng thuật toán này để mở rộng quy mô lên hoặc xuống, nhưng nếu bạn có thể được đảm bảo rằng div của bạn sẽ luôn được nhỏ hơn hình ảnh của bạn, bạn có thể sử dụng giải pháp CSS đơn giản hơn.

Có vẻ như bạn đã có mã để tập trung, vì vậy tôi sẽ để điều đó cho bạn.