динамически обрезать изображение css javascript / jquery

Question

Я ищу способ динамически вертикально центрировать изображения внутри div с фиксированной высотой.Я не могу сделать изображение фоновым изображением.У меня будет множество изображений высотой от 300х375 до 300х240.Мой рост внутреннего div будет 240, и если изображение выше, чем 240, я хочу центрировать изображение.Таким образом, при высоте 375 обрезается верх и низ 76,5 пикселей.Если бы это было 300 для высоты, это обрезало бы 30px сверху и снизу.

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

Я попытаюсь поработать над установкой jsfiddle, но хочу опубликовать его, так как, полагаю, это довольно просто, хотя я не смог найти решение.

Answer 1

Предполагая HTML-макет этого

<div class="one">
  <img src="https://placeimg.com/300/375/any">
</div>
<div class="one">
  <img src="https://placeimg.com/300/240/any">
</div>

Вы можете перебирать элементы div и устанавливать верхнее поле изображения в отрицательное значение, равное половине разницы между 240 и высотой изображения

$(document).ready(function() {
    $('.one img').each( function() {
    if( $(this).height() > 240 ) {
        var diff = ($(this).height() - 240) /2
      $(this).css('margin-top', (diff * -1) + 'px')
    }
  })
})

Для работы с div необходимо установить скрытое переполнение.

Fiddle: https://jsfiddle.net/calder12/29s5gnLq/

Answer 2

Вам не обязательно использовать js, попробуйте использовать flexbox.

HTML

<div id="root">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/1024px-Circle_-_black_simple.svg.png">
</div>

CSS

#root {
  width: 300px;
  height: 240px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

#root > img {
  width: 300px;
  height: 375px;
}

https://codepen.io/jc3m-the-flexboxer/pen/deEvpM