Amphtml: How to override `object-fit: contain` for amp-img inside amp-carousel slides?

[Letushev]

I want to create amp-carousel with the slides type. Images should have object-fit: cover.

<amp-carousel lightbox
              type="slides"
              layout="responsive"
              width="640"
              height="480">
                <amp-img class="cover"
                         layout="fill"
                         src="...">
                </amp-img>
</amp-carousel>

But images have default object-fit: contain property.
amp-img.cover > img { object-fit: cover } doesn't work, because .amp-carousel-slide>.i-amphtml-replaced-content { object-fit: contain } has more specificity.
I can't use !important and .i-amp-* rules, because they are forbidden.
Please, help

[cathyxz]

/to @sparhami /cc @nainar

[sparhami]

You could do something like:

amp-img.cover.cover > img {
  object-fit: cover;
}

I think two .covers should handle it. If not, you could add a third one. This is something we can look into making easier with the new version of amp-carousel.

[Letushev]

Thanks. It works

[jpettitt]

As a general rule you can fake !important by bumping the specificity with id's:

So

.foo { color: red!important; }

becomes

:not(#X):not(#X).foo { color: red; }

Generally adding two id's is enlough but you can add more :not(#X)'s if you need to.