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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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?
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.