<div class="cropped-image">Tomato</div>

:root {
  font-family: sans-serif;

  --image-size: 800px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.cropped-image {
  width: var(--image-size);
  height: calc(var(--image-size) / 2);

  font-size: 12.5em;
  font-weight: bold;
  text-align: center;
  line-height: calc(var(--image-size) / 2);

  background-image: url(https://ucarecdn.com/6476570f-a7e8-4346-9dde-e42ad30111d3/-/preview/1200x800/);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}