9

Preciso de fazer com que uma imagem dentro de uma div fique com uma largura de 600px e uma altura de 300px sem distorcer a imagem.

Tenho uma noção sobre css3 e html5 e estou trabalhando no layout de um blog na plataforma Blogger. Já alterei muita coisa no código fonte do layout inicial. E agora quero fazer é o seguinte:

Quero que na postagem apareça uma imagem de preview que seja gerada automaticamente a partir da primeira imagem do post, que no caso já programei pra acontecer isso, mas preciso que o preview tenha width:600px e height:300px sem distorcer a imagem que servirá como preview na pagina inicial.

Ela pode ser cortada, mas não distorcida, alguém poderia me ajudar a fazer isso?

Link do blog: https://www.futebolcomblush.com.br
Exemplo de como quero que a imagem fique: http://blogdopizzato.com.br/

Minha melhor tentativa frustada chegou a isto:

2 Respostas 2

11

Recortar imagem usando object-fit

Podes recortar uma imagem com a tag img utilizando o object-fit da seguinte forma:

.objectImage {
    width: 600px;
    height: 120px;
    object-fit: cover;
    object-position: center;
}
.imagemNormal {
    width: 600px;
    height: 120px;
}
<div class="imagem">
    <span>object-fit: cover; (imagem recortada)</span>
    <img class="objectImage" src="https://i.sstatic.net/gL1sB.jpg">
</div>

<div class="imagem">
    <span>imagem não recortada (altura da imagem encolhe) </span>
    <img class="imagemNormal" src="https://i.sstatic.net/gL1sB.jpg">
</div>

Hoje em dia todos os navegadores suportam o object-fit exceto o Internet Explorer.
Mais informações sobre a propriedade Object-fit nos seguintes links:


Recortar imagem usando um container com as propriedades Overflow e Position

.imagem-wrapper {
    width: 600px;
    height: 120px;
    overflow: hidden;
    position: relative; /* Para fazer que a imagem com position-absolute respeite a sua posição consoante este selector, ou evitar que saia do mesmo */
}
.imagem {
    width: 600px;
    /* código abaixo centra a imagem ao centro */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<div class="imagem-wrapper">
    <img class="imagem" src="https://i.sstatic.net/gL1sB.jpg">
</div>


Recortar imagem usando a imagem como background

Se estiveres a utilizar a imagem como background-image, também podes fazê-lo utilizando a propriedade background-size: cover;.

.imagemBg {
    width: 600px;
    height: 120px;
    background: url(https://i.sstatic.net/gL1sB.jpg) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<div class="imagemBg"></div>


Alternativa

Como alternativa, se estiveres à procura de recortar uma imagem com várias medidas preparadas, podes sempre utilizar plugins, como por exemplo em jQuery tens o resizeAndCrop.

Existem também outros plugins em PHP como o Timthumb, mas este deixou de ser aconselhável devido a problemas de segurança. Mas sempre podes pesquisar no Google por plugins à tua preferência de linguagem, PHP/JavaScript etc para encontrares o que é melhor e se adequa para as tuas necessidades.

0
1

Seria isso?

.preview {
  width: 600px;
  height: 300px;
  background-image: url('http://blogdopizzato.com.br/wp-content/uploads/2015/06/201501072015-Maranhao.jpg');
  border: 1px solid;
}
<div class="preview"/>

Se você quiser mover a imagem de dentro do background-image, utilize o background-position, exemplo:

background-position: 50px; /* desce 50px */

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 .