Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Igualar altura da div com a altura da imagem de fundo

Boa tarde!

Estou em um projeto, e me deparei em uma situação onde resolveria meu problema se a altura da div, for igual a altura de sua imagem definida no background-image.

Isso é possível?

Como faço para implementar esse artifício?

3 respostas
solução!

Olá Simão,

Acho que o ideal seria configurar via CSS, segue um exemplo LINK

É isso que você precisava?

Abraços!

Olá Simão!

Creio que não há uma regra CSS que permita fazer exatamente isso, porém vejo uma alternativa para a sua necessidade.

Utilizando uma tag <img src"..." /> "invisível" dentro da <div>, apenas para forçar que a altura seja a necessária e dispor o conteúdo por cima com position: absolute.

HTML
<div class="bg-div">
    <img class="img-bg" src="imagens/img.png" alt="Minha Imagem" />
    <div class="content-div">
        <!-- Conteúdo -->
    </div>
</div>
CSS
.bg-div {
    background-image: url('imagens/img.png');
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 250px;       // Defina a largura desejada para a imagem
    position: relative;    // A div filha irá se posicionar relativamente à essa
}

.img-bg {
    width: 100%;    // Ocupa toda a largura da div
    opacity: 0;
}

.content-div {
    position: absolute;
    top: 0;        // Posiciona a div no início da div principal
    left: 0;
    max-width 100%; // Não permite extrapolar as dimensões da div principal
    max-height: 100%;
}

Contudo, com essa implementação, não teria motivos para utilizar a imagem como background-image da div, bastaria apenas deixar a opacidade da <img /> como 1 que daria o mesmo efeito.

Espero ter contribuído, qualquer dúvida estou a disposição!

JVM

Muito obrigado a vocês pela ajuda! Abraço.