CSS Imagem não está ocupando apenas o espaço disponível na DIV

Medivh · 2 de junho de 2020

Como deixar uma div que contém uma imagem dentro ocupe todo o espaço disponível restante, de forma responsiva.

Mesmo deixando o display:relative , ainda consegui o efeito desejado, a imagem sempre sai um pouco da div pai, a ideia é que a imagem fique dentro da div pai que tem um tamanho fixo, e conforme vai inserindo conteúdo na div class:Bloco5 (conteúdo em vermelho), a imagem vai diminuindo seu tamanho sem vazar da div pai.

Anexei uma imagem que mostra a dúvida que estou tendo, uma imagem não responsiva.

Segue o html e css feito https://jsfiddle.net/q1cpjg7r/

Adicionei o html abaixo caso seja melhor, é a mesmo html do link jsfiddle

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .Texto{
        max-width:10cm;
        max-height:4.9cm;
        border: solid 1px;
        padding:3px;
      }
      .Bloco2{
        display:flex;
      }
      .Bloco3{
        background-color:blue;
      }
      .Bloco4{
        background-color:green;
      }
      .Bloco5{
        background-color:red;
      }
      .Bloco6{
        position:relative;
        height:100%;
      }
      span{
        position:relative;
        width:100%;
        height:100%;
      }
      span img{
        position:reltative;
        margin-top:5px;
        width:100%;
        height:100%
      }
    </style>
  </head>
  <body>
    <div class="Texto">
      <div class="Bloco2">
        <div class="Bloco3">
          <b>Um Texto um aqui</b>
        </div>
        <div class="Bloco4">
          <b>Um Texto dois aqui</b>
        </div>
      </div>
      <div class="Bloco5">
        <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</b>
      </div>
      <div class="Bloco6">
        <span>
          <img src="teste.jpg" alt="" class="imagem">
        </span>
      </div>
    </div>
  </body>
</html>

DiF · 3 de junho de 2020

@Medivh Sem mexer muito, remove o max-height:4.9cm; da class texto.

Como o objetivo é fazer algo responsivo, sugiro usar " vw " ao invés de % ou px na medida. na imagem e/ou nos elementos

Cordas · 3 de junho de 2020

Mas qual a intenção? Só fazer esse div com a imagem ou fazer uma página web?

Medivh · 3 de junho de 2020

@DiF e @Cordas, agradeço a reposta, a ideia mesmo erá desse contêiner ' .Texto ', é ter um tamanho limite, que no caso um tamanho de 4,9 centímetros.

Estou fazendo um projeto pessoal, nele me deparei com esse problema e queria saber se teria como somente a imagem ser responsiva, sem sobrepor a 'div pai' ou as 'div irmãs'.

Cordas · 3 de junho de 2020

Não estou certo, mas acho que não dá se a div for posta com um tamanho fixo. Coloca o 'Texto' com height: auto;

você vê a diferença. Eu acredito que para adicionar conteúdo na parte vermelha e para a imagem ir diminuindo conforme a quantidade de conteúdo teria de usar um javascript.