Cannot get this to work inside of my component...

Soooo, I can get this to work with a basic image with basic CSS, like so:

progressive-img {
  width: 100%;
  height: auto;
}

…but I cannot seem to get it to work with more specific CSS inside of a custom vue component. the image simply does not show up at all.

Can you see anything in this CSS that might be causing an issue with the plugin?

This is the CSS of the parent component:

.component {
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url(../../assets/images/logos/arrow-favicon-blue-10-percent.svg) no-repeat center 25vh, #091830;
}

and here is the CSS of the progressive-image, which is a child of the parent .component:

progressive-img {
  width: 100vw;
  height: calc(100vh - 48px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: cover;
  z-index: 1;
}

@media screen and (orientation: landscape) {
  progressive-img {
    width: 70vw;
    height: 100vh;
  }
}

Please let me know if you see anything, or if you need any more information to understand better. I looks like the image tries to load by flickering for a split second, but then it’s gone, if that helps at all.

…I think it’s almost there! XD

R

[MatteoGabriele]

you might want to use progressive-background for this, the progressive-img it maintains a responsive aspect ratio, that’s why doesn’t fit completely and also remember that when you add the object-fit property to your .progressive-image class, you are not actually targeting an img tag, but a bunch of divs and an image tag somewhere inside that structure: make sense that doesn’t work 😃

[MatteoGabriele]

@rchrdnsh thanks a lot 😃