Estou com uma dúvida, como faço para poder inserir imagens com tamanhos diferentes dentro de uma div, sendo que, se a imagem for muito grande verticalmente, ela fique com height:100%, e caso for muito grande horizontalmente com width:100%?
5 Respostas
Utilize uma combinação de imagens de fundo e configurações de comportamento via CSS.
Explicação:
background-size:contain
forçará a imagem de fundo a ser contida dentro do elemento;background-repeat:no-repeat
fará a imagem aparecer apenas uma vez;background-position: center
centralizará a imagem nos dois eixos, independente de tamanho ou largura.
.container {
width:200px;
height:200px;
display:inline-block;
background-size:contain;
background-repeat:no-repeat;
background-position: center;
border:1px solid black;
}
<div class='container' style='background-image:url(https://upload.wikimedia.org/wikipedia/commons/7/72/Wide_view_over_S%C3%B8rfjorden_from_the_coast_of_Sveingard,_2012_June.jpg)'>
</div>
<div class='container' style='background-image:url(http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg)'>
</div>
Se estás a tentar fazer isso utilizando a tag <img>
, podes fazer isso não especificando uma altura
ou largura
para a imagem, mas sim definindo os seguintes valores:
max-width:100%;
max-height:100%;
E para centralizar a imagem ao centro:
display: flex;
align-items: center;
justify-content: center;
Existem outras formas de centralizar elementos ao centro, mas neste caso foi esta a maneira que utilizei.
Tudo junto ficará algo como neste exemplo abaixo do CodeSnippet:
(Tens aqui também um EXEMPLO NO JSFIDDLE se preferires)
img {
max-width: 100%;
max-height: 100%;
}
.caixa {
height: 180px;
width: 180px;
background-color: #C8ECFF;
border:2px solid #717171;
margin-bottom:15px;
/* Centralizando imagens */
display: flex;
align-items: center;
justify-content: center;
}
<div class="caixa">
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="caixa">
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
Fixe a largura e altura máxima:
<img src="suaimagem.jpg" style="max_width:123px; max-height=123px"></img>
No seu css defina o style da seguinte maneira:
<style>
img{
width:auto;
height:auto;
}
</style>
-
2Amigo o `auto´ ele apenas irá pegar o próprio tamanho da imagem upada. Exemplo ela é de 325px450 com auto ela irá ficar com exatamente este mesmo valor, o caso dele é o seguinte, a imagem é 400x100 ele quer que a imagem fique por exemplo 100%x40%. 24/09/2015 às 12:15
-
@RenanRodrigues Com o 'auto' a imagem se adequará de acordo com o tamanho do elemento em que ela estiver. E é o que ele quer, ajustar a imagem de acordo com a div. Aí basta ver onde encaixa melhor. Se for maior verticalmente: 'height:auto', se for maior horizontalmente: 'width:auto'– Mathi90124/09/2015 às 12:24
Para resolver seu problema você deve pegar pelo Javascript o tamanho da imagem e fazer uma comparação entre o width e o heigth. No nosso exemplo, utilizaremos a tag
1º Pegamos o tamanho pelo jQuerey:
Largura = $('img#foto').width();
Altura = $('img#foto').height();
2° Fazer comparação para saber qual é maior:
if(largura > altura){
$('foto').css("width","100%");
}else{
$('foto').css("height","100%");
}
Provavelmente isto resolverá seu problema.