1

Tenho uma div que controla o tamanho maximo que uma imagem pode ter. Gostaria que a imagem se ajustasse ao tamanho da div, sem que cortasse parte dela (como acontece no overflow: hide).

Usei o overflow:hide para a imagem nao ultrapassar o limite da div.

HTML:

<div id="controlImg">
    <img src="img/arroz.jpg">
</div>

CSS:

#controlImg{
max-width: 400px;
max-height: 500px;
border: 1px solid green;}

#controlImg img {
    width: 100%;
    height: 100%;
}

No overflow: auto, cria-se uma barra de scroll ao inves de cortar a imagem, mas gostaria mesmo é que ela se adaptasse ao tamanho da div pai (controlImg)

Na imagem, inseri width:100% e height:100%, mas a imagem nao obedeceu, como mostra na imagem: inserir a descrição da imagem aqui

1
  • max-width: 100%; max-height: 100%; 12/09/2019 às 20:20

1 Resposta 1

0

Pode usar um width: 100% para a imagem ocupar toda a largura do elemento pai:

#controlImg {
    max-width: 400px;
    max-height: 500px;
    border: 1px solid red
}

#controlImg img {
  width: 100%
}
<div id="controlImg">
    <img src="https://picsum.photos/900">
</div>

Ou utilizando como background do elemento:

div {
  width: 500px;
  height: 400px;
  border: 1px solid red
}

.rice {
  background: url(https://i.stack.imgur.com/6Jgo0.jpg); 
  background-size: 100% 100%
}
<div class='rice'></div>

5
  • Renan obrigado pela resposta. Eu fiz assim, e ainda adicionei o height 100%, mas nao funcionou, como na imagem que inseri
    – WesLipe
    12/09/2019 às 20:09
  • Se for aplicar o tamanho na altura (ao invés da largura), seu elemento pai deverá ter um tamanho definido (um height e não max-height). E nesse caso não vai adiantar usar height e width juntos com 100%, a imagem não vai "se expandir" e ocupar todo o elemento, para isso você teria que usar a imagem como background do elemento. 12/09/2019 às 20:33
  • @WesLipe editei. 12/09/2019 às 20:41
  • Funcionou, mas infelizmente nao se encaixa no que eu preciso, pois a imagem (no caso do arroz) virá do banco, entao sera uma imagem por produto, nao posso setar no css uma padrao
    – WesLipe
    15/09/2019 às 1:19
  • O meu erro era que eu estava inserindo o max height e width na div, ao inves da imagem. Ao informar pra imagem que o maximo de altura e largura que ela deve ter é 100% em relação ao pai, a imagem se comportou bem. O codigo: #modalProduto #controlImg{ border: 1px solid green; } #controlImg img { /* largura e altura maxima de 100% da div pai */ max-width: 100%; max-height: 100%; }
    – WesLipe
    15/09/2019 às 1:25

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .