Как разместить картинки в определенном размере широкую и узкую одновременно?
1. Задайте background'ом картинки
2. Используйте polyfill для object-fit 
3. Через JS смоделируйте свойство object-fit: cover const images = document.querySelectorAll('img');

images.forEach(function(img){
  // get image width: 'w' and height: 'h'
  // get list-product-item__img width: containerW, height: containerH
  // .....
  const imgAspect = w/h;
  const containerAspect = containerW/containerH;

	if (containerAspect>imgAspect) {
    // set image width and height
		img.style.width = containerW;
		img.style.height = containerW / imgAspect;
	} else {
    // set image width and height
		img.style.height = containerH;
		img.style.width = containerH * imgAspect;
	}
})
https://codepen.io/tolfy/pen/MGVbwJ
полный ответ тут: Позиционнирование изображение внутри блока?