SOURCE

<div title="原图">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/chrome.jpg"
  />
</div>

<div title="fill">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/chrome.jpg"
  />
</div>
<div title="contain">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/chrome.jpg"
  />
</div>
<div title="cover">
  <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/chrome.jpg"
  />
</div>

img {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  overflow: visible;
}

div:nth-child(1) > img {
  object-fit: none;
}

div:nth-child(2) > img {
  object-fit: fill;
}

div:nth-child(3) > img {
  object-fit: contain;
}
div {
  position: relative;
}
div:nth-child(4) > img {
  object-fit: cover;
}

div::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  width:150px;;
  text-align: center;
  content: 'object:' attr(title);
}