1

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>

1
  • Editei minha resposta para manter sempre a proporção da imagem. Depois ve lá a resposta que tem mais detalhes.
    – hugocsl
    23/03/2018 às 14:57

3 Respostas 3

1

Eu faria com position:absolute e colocando altura e largura com min- 100% para sempre ocupar o tamanho inteiro do Pai e mantendo o "aspect ratio"! Porém para ficar bom tem que colocar overflow:hidden no Html e Body (pode ser que em determinadas situações não seja possível fazer assim).

Veja o exemplo: (exiba em "Página toda" para entender melhor)

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    color: #666666;
    border: 1px solid #F0F0F0;
    overflow: hidden;
}
.artigo-inner {
    margin: auto;
    width: 90%;
}
.artigo-inner img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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>
            <img src="http://placecage.com/500/500" alt="">
        </div>
    </div>
</div>

2
1

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
}
.artigo-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
.artigo-inner {
    margin: auto;
    width: 90%;
}

.my-background{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
<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">
    <img class="my-background" src="https://img.elo7.com.br/product/zoom/FBCE34/adesivo-paisagem-praia-decorando-com-adesivos.jpg">
    <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>

3
  • interessante, mas ainda não está proporcional ao elemento principal, que é o texto centralizado, cuja borda branca é marca seu limite, e também não está proporcionalmente responsiva ao texto. 23/03/2018 às 14:44
  • 1
    @JohnQuimera Veja se agora melhorou 23/03/2018 às 14:53
  • Sim, ficou melhor, e será muito útil. 23/03/2018 às 15:19
-1

Você pode injetar direto via css você cria uma classe no css fica mais ou menos assim:

.suaClase {background: url(imagens/imagem.gif) no-repeat;},

Ai você vai moldando o css de acordo com o que você precisa;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .