<div class="list-product-item__img">
<img :src="product.image" :alt="product.productname">
</div>.list-product-item__img {
width: 200px;
height: 200px;
}
.list-product-item__img img {
width: 200px;
height: auto;
}
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;
}
})
Простой
Простой
Простой
Средний