Как разместить картинки в определенном размере широкую и узкую одновременно?

Question

[Владимир Голубь]

Вывод картинок

<div class="list-product-item__img">
    <img :src="product.image" :alt="product.productname">
</div>

CSS

.list-product-item__img {
	width: 200px;
	height: 200px;
}

.list-product-item__img img {
	width: 200px;
	height: auto;
}

C широкой картинкой все ок, а вот узкая выходит за рамки.
Object-fit не поддерживает много браузеров.
Как сделать нормальный вывод ?

Comments

[Андрей Федоров]

Алексей, гыгы, show all нажмите... )))

Answer 1

[Aleksey Solovyev]

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;
	}
})

Answer 2

[Antony Bark]

https://codepen.io/tolfy/pen/MGVbwJ
полный ответ тут: Позиционнирование изображение внутри блока?