Canvas ignores object-fit property

When using any object-fit setting, its being ignored and images are simply stretched to fill the space due to flexbox props.

.bt-create-post-images-container {
  min-width: 100%;
  background-color: #8f8f8f;
  height: 350px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.bt-create-post-image-container {
  background-color: #8f8f8f;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.bt-create-post-image-container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-self: auto;
  vertical-align: middle;
}

<div class="bt-create-post-images-container" id="images">
  <div class="bt-create-post-image-container {{type == 'versus' && 'flex-versus' || ''}}">
    <img ng-show="show_left" ng-src="{{uri_left}}">
  </div>
  <div class="bt-create-post-image-container {{type == 'versus' && 'flex-versus' || ''}}">
    <img ng-show="show_right" ng-src="{{uri_right}}">
  </div>
</div>

[jpyamamoto]

Are there updates regarding this issue? Has anyone found a workaround?

[logicalicy]

FYI, there’s a different solution/workaround, as I struggled with object-fit and object-position. Instead of using an img, use a div with following CSS:

background-image: url(<MY_SOURCE>);
background-size: <OBJECT_FIT>;
background-position: <OBJECT_POSITION>;