In this Vue component, the parent element displays 8 instances of these components in a 2x4 grid layout. The issue arises when the image within each component is larger than its container, causing it to not shrink to fit while maintaining the aspect ratio as desired. Even though object-fit should handle this, the img tag ignores it and renders the image at full size, distorting the grid and disrupting the overall layout.
Interestingly, when the img tag is removed or commented out, the parent div adapts correctly to the size requirements and fills its designated grid space perfectly.
<template>
<div class="camera-wrapper">
<img class="camera" src="../assets/tsLogo.png" />
</div>
</template>
<style scoped>
.camera-wrapper {
position: relative;
border: 1px solid black;
width: 100%;
height: 100%;
overflow: hidden;
}
.camera {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>