Renan.Maziero

Pessoal,
 
 
 
Resolvi e não resolvi meu problema.
 
O importante é que pude contar com a ajuda de vocês e aprender algo a mais.
Abaixo segue tudo o que descobri sobre redimensionamento por CSS:
 
 
 
#1
 
Usuário: rikaschmitt
Comunidade: iMasters Fórum
Sugestão: 
Você pode usar a imagem como background da div e no CSS usa:
background-size:contain ou background-size:cover;
 
 
 
#2
 
Usuário: Marlon Pacheco
Comunidade: iMasters Fórum
Sugestão:
Buenas tchê.
Você pode também utilizar o atributo clip-path, que te permite cortar a imagem via CSS.
Dá uma olhada aqui (http://css-tricks.com/almanac/properties/c/clip/)
 
 
 
#3
 
Usuário: Electronic
Comunidade: iMasters Fórum
Sugestão:
Nao tem segredo
você deu uma largura pra div de 623px
 
agora de a img uma largura de 100% e altura auto
 
Assim ela será redimensionada (não fica distorcida) para caber dentro da div
 
veja na prática: http://jsbin.com/jiwararuwi/1/edit?html,css,output
 


.div-foto{ 


width:400px; 


height:500px; 


border:1px solid red; 


} 


img{ 


width:100%; 


height:auto; 


} 


 
 
se você quer cortar a imagem
 
é mais simples ainda; adicione overflow:hidden;
 
http://jsbin.com/cebayeyihi/1/edit?html,css,output
 


.div-foto{ 


    width:300px; 


    height:300px; 


    border:px solid red; 


    overflow:hidden; 


} 

 
 
 
Se a imagem for maior que a DIV, a parte que ultrapassa não será mostrada
 
não sei como será a inserção dessa imagem, se é estática ou dinâmica
 
se for dinamica pode ter a possibilidade de alguém colocar uma imagem menor que a div,
 
se for o caso terá que adicionar mais algumas propriedades pra garantir que ela fique cobrindo a div
 
na imagem
 


img{ 


  min-height: altura da div; 


} 

 
será esticada para ter a altura da div e a largura aumentará proporcionalmente, podendo ficar parte fora da div
 
 
 
#4
 
Usuário: VINICIUS.REINEHR
Comunidade: Fórum do Baboo
Sugestão:
Redimensionar é simples, só forçar no img de dentro da div pra que seja width: 623px e height: 921px.
 
porém, ficaria um redimensionamento "feio" e a imagem ficaria toda torta.
 
Você pode utilizar algumas ferramentas que corta a imagem ou pode utilizar a mesma como "background" deixando a div com a altura e largura que desejar.
 
Exemplo:
  HTML
 


<div class="imagemProduto" style="background:url('diretorio/imagem.jpg');"></div> 

 
 
 
CSS
 

.imagemProduto {


  width: 600px;


  height: 900px;


  border: 0px;


  background-position: center;


  background-repeat: no-repeat;


}
 
 
 
 
 
 
#5
 
Usuário: XANBURZUM 
Comunidade: Fórum do Baboo
Sugestão:
você também pode usar jquery para fazer o redimensionamento:
 
 
   

$(window).bind("load", function() { 


    // IMAGE RESIZE 


    $('#product_cat_list img').each(function() { 


    var maxWidth = 120; 


    var maxHeight = 120; 


    var ratio = 0; 


    var width = $(this).width(); 


    var height = $(this).height(); 


    


    if(width > maxWidth){ 


    ratio = maxWidth / width; 


    $(this).css("width", maxWidth); 


    $(this).css("height", height * ratio); 


    height = height * ratio; 


    } 


    var width = $(this).width(); 


    var height = $(this).height(); 


    if(height > maxHeight){ 


    ratio = maxHeight / height; 


    $(this).css("height", maxHeight); 


    $(this).css("width", width * ratio); 


    width = width * ratio; 


    } 


    }); 


    //$("#contentpage img").show(); 


    // IMAGE RESIZE 


    });  
 
 
 
 
 
#6
 
Usuário: dif
Comunidade: Fórum do Clube do Hardware
Sugestão:
Sim. é possivel fazer com CSS
 
veja um exemplo: http://jsfiddle.net/gu69jvn4/
 
Veja que na instrução CSS defini o width e o height na class do div.. e setei o width e height do elemento img como "inherit" isso permite que você deixe a imagem no tamanho da div. ou seja.. se você alterar o height do exemplo para um valor menor.. verá que a imagem irá ser redimensionada. abaixo tem um link que abre a imagem no tamanho natural.. no caso eu usei uma imagem de 3000 x 1688 
 
 
Para manter proporção veja este outro exemplo: http://jsfiddle.net/7z3z8z94/7/
 
Nesse caso, você pode usar o php para cortar a imagem ( crop) 
http://www.sitepoint.com/crop-and-resize-images-with-imagemagick/