Make p adjust to image size

Navigation
2

Good evening

I am putting <img> inside <p> with 192x192 and when it has little text the image ends up leaving <p> that it belongs. How can I make the border fit with the image size?

CSSCode:

.retrato{float:left;width:192px;height:192px;padding-right:10px;max-height:auto;max-width:auto;}p{text-align:justify;background-color:#D9E5E3;font-size:20px;text-align:justify;padding:10px10px;margin:10px0px;}

HTML

<p><imgclass="retrato" src="../Imagens/PortraitExample.png" alt="Portrait">
        <span class="nomeProdutor">Dilson César Devides</span>
        <br/>
        <br/>
        <strong>Professor, diretor do projeto</strong>. Mestre em Letras - Estudos Literários pela Universidade Federal de Mato Grosso do Sul (2006) e graduado em Letras Português/Espanhol pela Universidade Estadual de Ponta Grossa (2003). Tem experiência na área de Letras, com ênfase em Teoria Literária e Literatura Brasileira, atuando principalmente nos seguintes temas: canção, anos 1970, abertura política, Raul Seixas, cultura de massas, jogos digitais, roteiro para jogos, cibercultura.
        <br/>
        <br/>
        <strong>Jogo Favorito:</strong> Age of Empires II: The Age of the Kings
    </p>

    <p>
        <img class ="retrato" src="../Imagens/PortraitExample.png" alt="Portrait">
        <span class="nomeProdutor">Fábio 'FABINHO' Dutra</span>
        <br/>
        <br/>
        <strong>Roteirista</strong>. Apaixonado por narrativa em jogos, gosta de ouvir música e jogar.
        <br/>
        <br/> 
        <strong>Jogo Favorito:</strong> Street Fighter
    </p>

    <p>
        <img class ="retrato" src="../Imagens/PortraitExample.png" alt="Portrait">
        <span class="nomeProdutor">José 'JUCA' Américo</span>
        <br/>
        <br/>
        <strong>Desenhista conceitual, game design</strong>. Natural de Bauru, curte tatuagens, música eletrônica, heavy metal, comida japonesa e mangás. Tem interesse em arte em geral.
        <br/>
        <br/> 
        <strong>Jogo Favorito:</strong> Devil May Cry
    </p>
    
asked by anonymous 30.11.2018 / 21:39

1 answer

2

Just put CSS in the styles of P a overflow:auto , so even using float in some element within P it will not lose the reference of height of that element "floated" / p> 

.retrato {
  float: left;
  width: 192px;
  height: 192px;
  padding-right: 10px;
  max-height: auto;
  max-width: auto;
}

p {
  text-align: justify;
  background-color: #D9E5E3;
  font-size: 20px;
  text-align: justify;
  padding: 10px 10px;
  margin: 10px 0px;
  overflow: auto;
}
<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">Dilson César Devides</span>
  <br />
  <br />
  <strong>Professor, diretor do projeto</strong>. Mestre em Letras - Estudos Literários pela Universidade Federal de
  Mato Grosso do Sul (2006) e graduado em Letras Português/Espanhol pela Universidade Estadual de Ponta Grossa
  (2003). Tem experiência na área de Letras, com ênfase em Teoria Literária e Literatura Brasileira, atuando
  principalmente nos seguintes temas: canção, anos 1970, abertura política, Raul Seixas, cultura de massas, jogos
  digitais, roteiro para jogos, cibercultura.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Age of Empires II: The Age of the Kings
</p>

<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">Fábio 'FABINHO' Dutra</span>
  <br />
  <br />
  <strong>Roteirista</strong>. Apaixonado por narrativa em jogos, gosta de ouvir música e jogar.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Street Fighter
</p>

<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">José 'JUCA' Américo</span>
  <br />
  <br />
  <strong>Desenhista conceitual, game design</strong>. Natural de Bauru, curte tatuagens, música eletrônica, heavy
  metal, comida japonesa e mangás. Tem interesse em arte em geral.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Devil May Cry
</p>

Another technique would be to make a clearfix in <p> . So you create in%% of a pseudo element and in it you use a P 

p::after {
  content: "";
  display: table;
  clear: both;
}

See the code below 

.retrato {
  float: left;
  width: 192px;
  height: 192px;
  padding-right: 10px;
  max-height: auto;
  max-width: auto;
}

p {
  text-align: justify;
  background-color: #D9E5E3;
  font-size: 20px;
  text-align: justify;
  padding: 10px 10px;
  margin: 10px 0px;
}
p::after {
  content: "";
  display: table;
  clear: both;
}
<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">Dilson César Devides</span>
  <br />
  <br />
  <strong>Professor, diretor do projeto</strong>. Mestre em Letras - Estudos Literários pela Universidade Federal de
  Mato Grosso do Sul (2006) e graduado em Letras Português/Espanhol pela Universidade Estadual de Ponta Grossa
  (2003). Tem experiência na área de Letras, com ênfase em Teoria Literária e Literatura Brasileira, atuando
  principalmente nos seguintes temas: canção, anos 1970, abertura política, Raul Seixas, cultura de massas, jogos
  digitais, roteiro para jogos, cibercultura.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Age of Empires II: The Age of the Kings
</p>

<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">Fábio 'FABINHO' Dutra</span>
  <br />
  <br />
  <strong>Roteirista</strong>. Apaixonado por narrativa em jogos, gosta de ouvir música e jogar.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Street Fighter
</p>

<p>
  <img class="retrato" src="https://unsplash.it/192/192"alt="Portrait">
  <span class="nomeProdutor">José 'JUCA' Américo</span>
  <br />
  <br />
  <strong>Desenhista conceitual, game design</strong>. Natural de Bauru, curte tatuagens, música eletrônica, heavy
  metal, comida japonesa e mangás. Tem interesse em arte em geral.
  <br />
  <br />
  <strong>Jogo Favorito:</strong> Devil May Cry
</p>
    
30.11.2018 / 22:03
What's the difference between using "equals" vs == in LINQ to Entities? Validation does not enter the correct "if"