2

Esta imagem tem 500px x 500px e a div tem 600px x 600 px
Como consigo tratar a imagem para ficar do mesmo tamanho da div?

			#conteudo{
				width:600px;
				height:600px;
				float:left;
				background-color:#ff1;	
				display: initial;
				margin: auto;
				z-index: 6;
				overflow: hidden;
			}
<html>
  <body>
		<div id='conteudo'> 
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png">
		</div>
	</body>
</html>

0

3 Respostas 3

4

Pode usar o seletor filho >, assim #conteudo > img e aplicar width e height com 100%;, assim só irá afetar a imagem que for filho direto de #conteudo

Exemplo:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    width: 100%;
    height: 100%;
}
<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png">
</div>

Pode ocorrer da imagem ficar distorcida, então você pode optar por usar 100% somente no height ou width, o que não vai preencher, para preencher tudo ou distorce a imagem (acaso ela seja mais retangular que o elemento "pai") ou então deve ultrapassar a largura ou altura, por exemplo veja como fica distorcido:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    width: 100%;
    height: 100%;
}
<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png">
</div>

Preencher e manter a proporção

Para ultrapassar o tamanho e ainda conseguir manter a proporção pode usar min-width e min-heigth, por exemplo:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    min-width: 100%;
    min-height: 100%;
}
<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png">
</div>

Desta maneira irá manter a proporção do tamanho da imagem em relação ao elemento "pai" sem distorcer.

Com background-size

O CSS tem uma propriedade chamada background-size, do qual lhe permite ajustar o tamanho do background

background-size: cover

Irá ajustar até ocupar tudo

#conteudo{
    width:600px;
    height:600px;
    float:left;
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;

    background:#ff1 url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png) no-repeat; /*aplica a imagem*/
    background-size: cover; /*Ajusta o tamanho para "cobrir"*/
}
<div id='conteudo'>Olá mundo</div>

background-size: contain

Irá ajustar até ocupar a largura ou altura

#conteudo{
    width:600px;
    height:600px;
    float:left;
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;

    background:#ff1 url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png) no-repeat; /*aplica a imagem*/
    background-size: contain; /*Ajusta o tamanho para "cobrir"*/
}
<div id='conteudo'>Olá mundo</div>

14
  • o jeito que você me passou deu certinho !! teria como fazer com um background?! Commented 19/09/2017 às 19:15
  • @MateusAlcântara tem sim, um minuto
    – Syzoth
    Commented 19/09/2017 às 19:16
  • Desde já obrigado Commented 19/09/2017 às 19:17
  • @MateusAlcântara editei a resposta
    – Syzoth
    Commented 19/09/2017 às 19:20
  • Obrigado Guilherme, mas no meu caso pelo background ainda não deu certo, quando eu clico em uma imagem e ela é aberta dentro do background, fica um espaço " sobrando " Commented 19/09/2017 às 19:46
1

#conteudo{
				width:600px;
				height:600px;
				float:left;
				background-color:#ff1;	
				display: initial;
				margin: auto;
				z-index: 6;
				overflow: hidden;
			}
<html>
  <body>
		<div id='conteudo'> 
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png" width="600" height="600">
		</div>
	</body>
</html>

você pode colocar o tamanho e altura direto na imagem, pelo css altura e largura 100%.

0

Você pode colocar para ao elemento img, ocupar 100% da altura e do comprimento.

#conteudo{
width:600px;
height:600px;
float:left;
background-color:#ff1;  
display: initial;
margin: auto;
z-index: 6;
overflow: hidden;
}
img{height:100%; width:100%;}<--------------
16
  • existem algum jeito de deixar dentro da div conteudo, apenas? Commented 19/09/2017 às 18:51
  • Sim, deu certo, muito obrigado pela ajuda Commented 19/09/2017 às 19:18
  • img{ vai afetar todos elementos fora do #conteudo.
    – Syzoth
    Commented 19/09/2017 às 19:21
  • @MateusAlcântara como comentado pelo Guilherme se quiser que seja aplicado apenas nessa imagem vc pode fazer: #conteudo img{...}, considere validar uma das respostas, clicando no icon verde abaixo as setas de avaliação, boa sorte! ;)
    – MagicHat
    Commented 19/09/2017 às 19:31
  • Titulo diz, reajustar imagem para o tamanho da div, e você usou o seletor img {} que vai afetar imagens dentro e fora do div, ou seja dentro do que foi perguntando funciona mas apresenta um efeito colateral que vai fazer outras imagens que não deveriam se ajustarem ao tamanho dos seus elementos "parents", o provavel seletor adequado seria #conteudo img ou #conteudo > img
    – Syzoth
    Commented 19/09/2017 às 19:33

Você deve fazer log-in para responder a esta pergunta.

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