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>