No código abaixo verão a solução de @hugocsl para outra pergunta minha. O que estou querendo fazer agora é colocar nesse elemento, uma imagem de fundo sem utilizar background-image
mas com <img>
fluida, responsiva, de modo que o texto centralizado seja sempre proporcional a imagem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.artigo-main {
height: 100%;
width: 100%;
display: table;
text-align: center;
}
.artigo-content {
display: table-cell;
vertical-align: middle;
background: #fff;
color: #666666;
border: 1px solid #F0F0F0;
}
.artigo-inner {
margin: auto;
width: 90%;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="artigo-main">
<div class="artigo-content ">
<div class="artigo-inner">
<h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
<p>Abril 26, 2018</p>
</div>
</div>
</div>