Bom dia prezados(as), tenho um html e de vez em quando preciso inserir uma imagem que é uma "}" para determinar que em uma música irá repetir aquele trecho.
Como meu texto se adapta ao tamanho da tela, quando movimento ele muda de tamanho e a imagem é fixa, o que preciso é que ela se adapte ao tamanho do texto.
No planejamento que tive, comecei com uma ideia muito boa, deixei a div que possui o louvor sem Height
, dessa forma ele fica automático, ficando na altura exata do texto. Se eu coloco a div onde está a chave sempre da mesma altura (até mesmo quando a outra é redimensionada).
Abaixo segue uma imagem onde destaquei as duas div's para entenderem melhor:
Caso eu consiga de alguma maneira, deixo minha resposta, até lá, aceito qualquer ajuda ou ideia.
CSS:
#louvor{
background-color: rgba(00,00,00,0.8);
margin-left: 1%;
width: 93%;
position: relative;
float: left;
font-size: 3.5vw;
text-align: left;
color: white;
text-transform: uppercase;
text-shadow: 1px 1px black;
font-family: "Futura XBlk BT", Times, serif;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../../css/style.css" rel="stylesheet" />
</head>
<body id="principal">
<div id="estrutura">
<div id="logo-louvor"></div>
<div id="louvor">
<font color="yellow">CORO:</font><br>
AS MINHAS MÃOS TRAZEM CHAGAS TÃO FUNDAS<br>
QUE TANTA AMARGURA EU PUDE ABRIGAR<br>
DE TODA DOR DE VERGONHA E PECADO<br>
EU FUI COROADO PARA TE SALVAR<br>
</div>
<div id="inform">
<img src="../../imagens/chaves.png">
</div>
</div>
</body>
</html>