Image shrinks when using placeHolderSrc or effect

[abuhelos]

Bug description I have a row of thumbnail pictures for an image gallery that overflow the container that they are in. To maintain the aspect ratio I have the max height and width set to 100%. When I use the placeHolderSrc or effect prop the images shrink to fit the container they are in instead of overflowing.

To Reproduce Paste the code that is producing the issue

  const thumbnailImages = items.map((item,index) => {
    return(
        <Thumbnail
          key={item.id}
          select={activeIndex === index}
          onClick={() => moveTo(index)}
          src={item.image}
        />
    )
  })

<ThumbnailList centerThumbnail = {props.centerThumbnail}>
        {thumbnailImages}
</ThumbnailList>

const ThumbnailList = styled.div<ThumbnailListProps>`
    display: flex;
    max-width: 100%;
    height: 15%;
    margin-top: .5rem;
    gap: 2px;
    overflow: scroll;
    justify-content: ${props => props.centerThumbnail ? 'center' : 'start'};
`
const Thumbnail = styled(LazyLoadImage)<ThumbnailProps>`
  opacity: ${({select}) => select ? '1': '.5'};
  max-height: 100%;
  max-width: 100%;
  &:hover {
    cursor: pointer;
    opacity: 1;
}

//SlideshowContainer parent of Thumbnail List
const SlideshowContainer = styled.div`
  position: relative;
  height: 100%;
  width: 100%;
`
`

Link to a repo where this issue can be reproduced if available:

Expected behavior I want the images to be able to overflow like they do when placeHolderSrc or effect are not used.

Technical details:

• Package version [1.5.6]
• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Mac OS]
• Browser [Chrome]

[mihailo1]

setting background position matching with object-fit of contained image helped:

     '& .lazy-load-image-background': {
        backgroundPosition: 'center',
      },