Div captures the size of another

Question

Div captures the size of another

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Good morning, I have an html and every now and then I need to insert an image that is a "}" to determine that in a song it will repeat that part.

As my text adapts to the size of the screen, when it moves it changes size and the image is fixed, what I need is that it adapts to the size of the text.

In the planning I had, I started with a very good idea, I left the div that has the praise without Height , that way it stays automatic, staying at the exact height of the text. If I put the div where the key is always the same height (even when the other is resized).

Below is an image where I highlighted the two div's to understand it better:

IfIsomehowgetit,Ileavemyanswer,untilthen,Iacceptanyhelporidea.

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:1px1pxblack;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>

javascript html5 css

asked by anonymous 16.01.2018 / 12:20

2 answers

How to work with validation messages in the Angular List data from an android API

score 0 · Answer 1

I created any div with any text:

<div class="teste">
      Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e o
</div>

So I created the following css code, I took some image in google and put it as if it was your key, I put it so it does not repeat itself and on the right side, so the text does not stay on top of it, put a padding on the right and put it to fit the height of the div.

.teste{
  background-color: #f00;
  width: 200px;
  background: url('https://teja8.kuikr.com/i6/20171219/After-1-year-of-use--it-is-still-going-well-VB201705171774173-ak_WBP1721615504-1513671149.jpeg') right;
  background-repeat: no-repeat;
  background-size: auto 100%;
  color: #fff;
  padding-right: 20px;
}

Result: link

If you will use this same css code in more than one part in the page, does not use id, uses class.

score 0 · Answer 2

I was able to develop something that suits me, I will publish the answer so that if anyone has future doubts and finds my code viable, it is available.

First, inside my HTML I added an image normally:

<img class="chave-big" src="../../imagens/chaves.png">
            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>

After a very simple way, I added a css to the image:

.chave-big{
    height: 19vw;
    float: right;
}

In this way, I'm using a height size with a responsive value "vw" and I've set the image to have the float value to the right, so it follows my text in size because my text is also responsive based on the " vw ".

Thank you all.