Achatamento/Redimensionamento de imagem com CSS

[Renan.Maziero]

Saudações,

 

Situação:

 

Imagem de dimensões 1000 x 1000 px e Div de dimensões 623 x 921 px.

(pense na foto de um produto numa loja virtual)

 

Para que eu não precise criar uma imagem de 623 x 921 px eu posso aproveitar a mesma imagem de1000 x 1000 px e preencher a Div com alguma propriedade CSS? Meio que redimensionar ou cortar a imagem nos limites da Div?

 

Agradeço desde já quem poder me ajudar! 

[DiF]

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 

[Renan.Maziero]

muito obrigado cara!

 

e tipo... eu consigo manter a proporção?

 

valeu!

[DiF]

Não. pois você está setando direto o tamanho da imagem.

 

Para manter proporção veja este outro exemplo: http://jsfiddle.net/7z3z8z94/7/

[Renan.Maziero]

Muito obrigado a todos!

 

Estou reunindo varias informações importantes sobre esse assunto para compartilhar com o fórum...

 

Dentro de alguns dias postarei as formas que estou pesquisando para resolver essa questão...

 

Obrigado pela atenção!

[Renan.Maziero]

Rapaziada,

 

Desculpa a demora... infelizmente não achei solução... 

 

fico ainda no aguardo!

Meu objetivo é definir uma altura fixa (ou que preencha toda a altura da div) e completar proporcionamento o resto (largura) cortando a imagem quando terminar a div (que tem uma largura fixa)

 

Não sei se consegui passar corretamente meu pensamento, talvez com a imagem ajude:

 

 

Obrigado!

[DiF]

Nesse caso, você pode usar o php para cortar a imagem ( crop) 

 

http://www.sitepoint.com/crop-and-resize-images-with-imagemagick/

[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/