Community images in Observatory do not resize

[EvaMart]

When switching between communities in the community-selector, the images sometimes appear cut, instead of fitting the space.

[EvaMart]

• Use width: 100% and height: auto to make the image responsive within its container.
• Use object-fit to control the resizing behavior and maintain the aspect ratio without cropping.
• Use Flexbox for centering and making sure the image fits well within the container.

<div class="container">
  <img :src="require(`@/static/collections/${collections[model].image}`)" class="responsive-image" alt="Community logo">
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 200px;
  }
  
.responsive-image {
    width: 100%;
    height: auto;
    max-height: 100%;
  }

[EvaMart]

Merged to staging branch.