Preview de pedaço de imagem

[Leandro Gomes da Silva 0]

Boa tarde pessoal! Tenho uma dúvida aqui que acredito ter uma solução simples, mas não sei como perguntar isso exatamente e por isso não conseguir realizar uma pesquisa no Google e até mesmo aqui no fórum. Segue o que estou matutando aqui:

 

Bom, digamos que eu tenho um site bacaninha onde na página inicial existem algumas áreas com miniatura de imagens contidas em uma postagem. Atualmente elas estão definidas com uma largura fixa para não atrapalhar a organização do layout, o problema é que algumas ficam bem pequenas por terem a largura MUITO maior que a altura. o que eu queria fazer, é pegar a imagem original e exibir um pedaço dela (por exemplo um retângulo de 150px por 100px, com centro no centro da imagem original) ao invés de exibi-la pequena. Assim, todas as imagens terão o mesmo tamanho na página inicial e nenhuma será deformada.

 

Não consegui encontrar um exemplo disso na internet, mas lembro que uma vez vi um tutorial que ensinava uma coisa bem parecida usando apenas CSS.

 

Fui bem claro? Espero ter conseguido emitir minha dúvida a vocês!

[WilkerIceri 4]

Você pode tentar algo desse tipo:

#imagem {
  background: url('img/imagem.jpg') no-repeat center center;
  width: 150px;
  height: 100px;
}

[Lucas Perdidão 1]

Faz assim, no HTML:

 

<div class="suaclasse" style="background-image: url(suaimagem.jpg);"></div>

 

e no CSS:

 

.suaclasse{
  background-position:center center;
  background-repeat:no-repeat;
  width:150px;
  height:100px;
}

 

 

Assim rola legal.

[Leandro Gomes da Silva 0]

Obrigado pelas dicas. Mas e se minha imagem estiver definida assim:

 

<a href="...>

<img title="..." alt="..." src="....jpg">

</a>

 

Como faço?

[ricardo_mc 19]

No caso do <img> não dá pra fazer isso de forma simples, na verdade, não sei dá pra fazer isso de qualquer forma. rsrs

 

A única forma que vejo possibilidade de conseguir o que você quer, é eliminar a tag <img> e usar o que os colegas acima falaram. Mas tem que usar um display:block no <a> para que ele respeite a largura e altura, pois não terá nenhum conteúdo aparente.

 

HTML

<a href="..." class="imgResize" style="background:url(suaimagem.jpg);" title="Nome da Imagem"></a>
<a href="..." class="imgResize" style="background:url(suaimagem2.jpg);" title="Nome da Imagem"></a>
<a href="..." class="imgResize" style="background:url(suaimagem3.jpg);" title="Nome da Imagem"></a>

 

CSS

.imgResize{display:block;width:150px;height:100px;background-position:center center;background-repeat:no-repeat;}

 

 

Espero que ajude.