0

Gostaria de saber como faço pra deixar uma imagem de notícia por exemplo no formato retangular, sem perder proporção. Procurei na internet e não achei nada que pudesse me ajudar.

inserir a descrição da imagem aqui

Observe que a imagem esta retangular.

6
  • Do que se trata, de um recorte? Teria um exemplo? 15/11/2015 às 3:27
  • editei a pergunta e coloquei uma imagem de exemplo. 15/11/2015 às 3:34
  • Então, basicamente, você possui uma imagem de um forma específica e quer apresentá-la de forma retangular na página? É isso? 15/11/2015 às 3:39
  • Exato Samir Braga! 15/11/2015 às 3:39
  • O que você irá aparar a imagem, isto é aceitável pra ti?
    – Syzoth
    15/11/2015 às 3:41

2 Respostas 2

2

Acredito que tenha muitas maneiras de se fazer isto por exemplo o background-size com background-position, como já citado.

No entanto background-size não é suportado por alguns navegadores mais antigos (se houver necessidade de controlar o tamanho), se tiver a necessidade de rodar em alguns mobiles mais antigos recomendo usar overflow: hidden;, veja um exemplo:

.post .photo {
    overflow: hidden;
    width: 400px;

    /*Aqui deve ficar a altura da imagem desejada*/
    height: 150px;
}
.post .photo img {
    /*Aqui você deve ajustar pra centralizar a imagem verticalmente*/
    margin-top: -75px;
}
<div class="post">
    <div class="photo">
        <img src="https://i.stack.imgur.com/kCKkG.png">
    </div>
</div>

Veja a imagem original:

logo

1

Bem Alexsander, isso pode ser feito de uma maneira bem simples, por meio da propriedade background do css. Por exemplo:

<div class="noticia"></div>
<style>
.noticia{
  width: 300px;
  height: 200px;
  background: url('http://goo.gl/n7nehC') no-repeat;

}
</style>

Resulta em: http://jsfiddle.net/SamirChaves/qe7BJ/2/

Utilizando sua imagem como o background da div. Através do background-position e do background-size, você poderá alterar a posição e o tamanho da imagem.

Há mais informações nesse documentos (em inglês):

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

4
  • Teria como utilizar sem ser por background? pois a imagem está em banco de dados 15/11/2015 às 3:53
  • 1
    @AlexsanderDuques pode usar a propriedade style="background-image: url(<?php echo $row['image']?>)"
    – Syzoth
    15/11/2015 às 3:54
  • 1
    A imagem estar no banco de dados não é empecilho. 15/11/2015 às 3:55
  • Agradeço a todos pela atenção, vou testar aqui e dou retorno. Obrigado. 15/11/2015 às 3:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .