[Question]: How to set specifying aspect ratios for images

[huhan-123]

Description

In the "limitations" section, you have mentioned, "For images, specifying aspect ratios can prevent unbalanced distributions." However, I couldn't find the relevant properties to set aspect ratios. How should aspect ratios be set?

Solution

No response

Additional context

No response

Preferences

• [x] I want to be assigned to and work on this issue myself

[huhan-123]

I have resolve the problem through paddingTop which i have never used:

<masonry-wall :items="images" :ssr-columns="5" :column-width="300" :gap="7" :scroll-container="scrollContainer">
  <template #default="{ item, index }">
    <div class="image-container" :style="{ paddingTop: `${(item.height / item.width) * 100}%` }">
      <img :src="item.imageUrl"/>
    </div>
  </template>
</masonry-wall>

.image-container {
  position: relative;
  width: 100%;
}

.image-container img {
  position: absolute;
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
}