html - 用 div 将 img 包裹在 flexbox 中

Question

我有以下代码来模拟object-fit:containIE 兼容性。

.cbs-Item {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 500px;
}

.cbs-Item img {
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
}

.cbs-Item img:hover {
  opacity: 0.5;
}

<div class="cbs-Item">
  <img src="https://www.imgacademy.com/themes/custom/imgacademy/images/helpbox-contact.jpg" />
</div>

我想将内部包裹img在一个 div 中，同时让一切看起来都一样。我怎样才能做到这一点？