Как правильно адаптировать картинку и текст в нутри блока?

Question

[RushV]

Добрый день!
Есть вот такой блок внутри блока фото, и текст.
Как адаптировать фото и текст внутри блока что бы не вылазил текст?
А то у меня вот как отображается каша:

<div class="col-md-6 col-sm-6">
	<div class="fon-st-even">
		<img src="img/ev-2.jpg" alt="...">
			<div class="bl-text">
				<h2>10 Января 2017г.,</h2>
					<p></p>
					<p></p>
			</div>
		</div>
	</div>

Вот стили:

fon-st-even {
    background-color: RGB(0, 107, 175,0.6);
    border: 4px solid #0073BE;
    margin: 20px 10px 20px 10px;
    overflow: hidden;
}
.fon-st-even img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    z-index: -1;
}
.bl-text {
    position: absolute;
    top: 10%;
    padding: 20px;
    width: 86%;
}

Comments

[Alex Bond]

А почему не запихнуть картинку в фон?

[RushV]

А потому что по плану надо будет добавлять, или удалять картинки