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.