JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Вариант №1 -->

<div class="block">
	<div class="text">Вариант №1</div>
	<img src="https://ld-wp.template-help.com/wordpress_prod-17867/v2/wp-content/uploads/2018/05/rezidans-home-img-1.jpg" alt="">
</div>



<!-- Вариант №2 -->
<div class="block2">
	<div class="text">Вариант №2</div>
</div>

CSS

/* Вариант №1 */

.block {
	display: block;
	width: 100%;
	height: 300px;
	overflow: hidden;
	position: relative;
}
.block .text {
	font-size: 60px;
	color: #fff;
	position: absolute;
	top: 50px;
	left: 20px;
}
.block img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Вариант №2 */
.block2 {
	display: block;
	width: 100%;
	height: 300px;
	overflow: hidden;
	position: relative;
	margin-top: 20px;
	background: url('https://ld-wp.template-help.com/wordpress_prod-17867/v2/wp-content/uploads/2018/05/rezidans-home-img-1.jpg') no-repeat 50% / cover;
}
.block2 .text {
	font-size: 60px;
	color: #fff;
	position: absolute;
	top: 50px;
	left: 20px;
}










* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family:  tahoma;
}