Сделайте фиксированный размер изображения в карточках, которые зациклены в * ngFor в Angular

Question

У меня есть массив подобных карточек, которые будут получать изображения с URL-адресов разных размеров. Как я могу сделать это согласованным на всех картах.

I was doing this for styling the image and its container. HTML

CSS

.container {
  width: 250px;
  max-height: auto;
  float: right;
}

.card-image {
  max-width: 100%;
  height: auto;
}

Может ли кто-нибудь помочь?

Answer 1

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

Класс стиля для изображений, которые вы using is card-image.

Если вы установите эти 2 свойства в этом классе, вы сможете получить постоянный / фиксированный размер для изображений на всех карточках, что-то вроде-

  .card-image {
    width: 75px;
    height: 50px;
  }

Answer 2

Используйте ширину, недостатком является то, что изображение не будет хорошо выглядеть, решение - изображения svg

.card-image {
   width: 75px;
   height: 75px;
}