Make the <p> fit the image size

Question

Good night

I’m putting a <img> within the <p> with 192x192 and when it has little text the image ends up leaving the <p> that it belongs to. How can I make the edge of it fit with the image size?

CSS code:

.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;
}

HTML

<p>
        <img class ="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>

Answer 1

Just in CSS you put in the styles of P one overflow:auto, this way even using float in some element within the P he won’t miss the reference of height of that element "floated"

.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 making one clearfix in the <p>. So you create in the P one pseudo element and in it you use a clear:both

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>