Cannot override with CSS alone about object-fit-images HOT 7 CLOSED

@bfred-it I did use the font-family as instructed in the readme. For instance:

.img-element {
  height: 100%;
  font-family: 'object-fit: contain;';
  object-fit: cover;
  width: 100%;

  @include breakpoint(lg) {
    font-family: none;
    object-fit: none;
    height: auto;
  }
}

On window load, I was running objectFitImages(null, {watchMQ: true});. The override in the CSS above wasn't working with this setup -- upon hitting the large breakpoint, the background image generated by OFI still existed and did not get removed.

Does the objectFitImages function have to get re-run on the document resize event as well?

from object-fit-images.

OFI works when you define the font-family as instructed in the readme. Use that property in the media query as well and enable watchMQ to make sure any changes made by Media Queries are picked up by OFI.

from object-fit-images.

It's not font-family: none but font-family: "object-fit: none"

watchMQ is what enables OFI to run automatically on resize.

Also are you sure you're not looking for object-fit: fill? That's the initial value; none is a different behavior

from object-fit-images.

Thanks @bfred-it, that helped. Might be useful to update the readme to be a bit more explicit about how overrides work.

Is there a way to completely get rid of the background image polyfill at a specific breakpoint? Basically I want to go from object-fit: cover on mobile to a normal inline image with max-width: 100% on desktop.

from object-fit-images.

OFI just follows the CSS you feed it.

So if in a normal browser this is your code:

@media (max-width: 100px) {
    img {
        object-fit: cover;
        width: 100px;
        height: 100px;
    }
}

This would be your equivalent ofi code

@media (max-width: 100px) {
    img {
        object-fit: cover;
        font-family: 'object-fit: cover';
        width: 100px;
        height: 100px;
    }
}

If instead you need to re-set it:

img {
    object-fit: cover;
    font-family: 'object-fit: cover';
}
@media (max-width: 100px) {
    img {
        object-fit: fill;
        font-family: 'object-fit: fill';
        width: 100px;
        height: 100px;
    }
}

This is already covered by the docs: When you set object-fit you also need to set font-family to include the value of object-fit as a string.

You can see it working in the new demo: https://bfred-it.github.io/object-fit-images/demo/

Since you're using SCSS, perhaps its mixin can make it easier: https://github.com/bfred-it/object-fit-images/blob/master/preprocessors/mixin.scss

from object-fit-images.

Thanks for the response @bfred-it.

Unfortunately, what I want to do is override the original object-fit property at a specific breakpoint entirely, so that the image reverts to a standard block-level element displayed at 100% width. For example:

img {
  object-fit: cover;
  font-family: 'object-fit: cover';
}
@media (max-width: 1024px) {
  img {
    object-fit: none;
    font-family: 'object-fit: none';
    height: auto;
    width: 100%;
  }
}

It doesn't seem this is possible now, as the polyfill generates a background-image fallback that doesn't get overriden if the object-fit property is later set to none.

Is that a feature you would consider adding? It would be hugely helpful for complex layouts that require object-fit at only some breakpoints.

from object-fit-images.

That works in the next version (3.0.0-0): npm install object-fit-images@next or the one in this repo

from object-fit-images.