Задача такова: есть список продуктов, генерируемый *ngFor.
У каждого продукта есть изображение
{{product.image}}
Это изображение я получаю из JSON файла:
[
{
"title": "Product 1",
"price": "3000",
"image": "https://abcdefg/hij/klm.jpeg"
},
{
"title": "Product 2",
"price": "200",
"image": "https://bbbbnnnnn/ggghhh/kjk.jpeg"
}
]
<ul>
<li *ngFor="let product of products">
<span class="product__image">
{{product.image}}
</span>
<span class="product__title">
{{product.title}}
<span>
<span class="product__price">
{{product.price}}
<span>
</li>
</ul>
Проблема в том, что изображения не приведены к единому виду. Чтобы более-менее корректно их отображать в рендере на странице, мне бы подошёл вариант
background-size: cover;
для соответствующего блока.
Можно было бы вставить изображение через тег
img
и пропискать для него стили в CSS, но для
img
background-size: cover;
не получится прописать.
Каким образом будет корректно решить такую задачу?