jQuery - изменение размера изображения для соответствия div

Question

У меня есть divs, различающиеся по высоте и ширине, и я хочу, чтобы мои изображения были автоматически изменены, чтобы заполнить эти divs 100%, а затем, конечно, центрированные.

В настоящее время мои изображения установлены на ширину 100%, а затем с помощью jQuery ниже по центру, но это работает только для изображений, где высота больше, чем когда-либо размер div. Как бы я сделал это на 100% для обоих высота и ширина и центр также .. полностью заполняя div (даже если это означает растяжение изображения)!

Спасибо.

$('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

Используйте CSS, чтобы установить как ширину и высоту изображения до 100%, и изображение будет автоматически растягивается, чтобы заполнить содержащий DIV, без необходимости JQuery.

Кроме того, вам не нужно будет центрировать изображение так, как оно уже растянуто, чтобы заполнить div (с нулевым положением).

HTML:

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

CSS:

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

Таким образом, если пользователи отключили JavaScript, изображение все равно будет растянуто на весь Div ширина/высота.

ИЛИ

Способ JQuery (SHRINK/РАСТЯЖЕНИЕ ДЛЯ ПРИСПОСОБЛЕНИЯ - не включает в себя WHITESPACE):

$('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}); 
    } 
}); 

JQuery путь - УРОЖАЙ ДЛЯ ПРИСПОСОБЛЕНИЯ (NO WHITESPACE):

$('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

Если вы хотите сохранить коэффициент изображения, я бы установил max-height и max-width на 100%. Here's образец, чтобы показать, как это работает. Это позволит эффективно сжимать изображения, большие, чем div, но он сохранит пропорции.

Для изображений, размер которых меньше, чем у div, вам придется масштабировать JavaScript. Основной алгоритм следующим образом:

1. Найти соотношение сторон изображения (ширина/высота)
2. Найти пропорции в DIV (ширина/высота)
3. Если соотношение сторон изображения является меньше, чем в DIV, установите изображения в height к 100%
4. Если соотношение сторон изображения является больше, чем в DIV, установите изображения в width к 100%
5. Какой размер не установлен, установите его в auto

Очевидно, что вы могли бы использовать этот алгоритм для масштабирования вверх или вниз, но если вы можете гарантировать, что ваш DIV будет всегда меньше, чем ваш образ, вы можете используйте более простое решение CSS.

Похоже, у вас есть код для центрирования, поэтому я оставлю это вам.