CSS exibe uma imagem redimensionada e cortada

Quero mostrar uma imagem de um URL com uma certa largura e altura, mesmo que tenha uma proporção de tamanho diferente. Então, eu quero redimensionar (mantendo a proporção) e depois cortar a imagem para o tamanho desejado.

Eu posso redimensionar com a imgpropriedade html e posso cortar com background-image.
Como posso fazer as duas coisas?

Exemplo:

Esta imagem:

Tem o tamanho de 800x600pixels e eu quero mostrar como uma imagem de 200x100pixels

Com imgeu posso redimensionar a imagem 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

Isso me dá o seguinte:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

E com background-imageeu posso cortar os 200x100pixels da imagem .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Dá-me:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

Como posso fazer as duas coisas?
Redimensionar a imagem e cortá-la do tamanho que eu quero?

Você pode usar uma combinação de ambos os métodos, por exemplo.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Você pode usar negativo marginpara mover a imagem dentro do <div/>.

Com o CSS3, é possível alterar o tamanho de um background-imagecom background-size, cumprindo os dois objetivos ao mesmo tempo.

Existem vários exemplos em css3.info .

Implementado com base no seu exemplo , usando donald_duck_4.jpg . Nesse caso, background-size: cover;é exatamente o que você deseja - ele serve background-imagepara cobrir toda a área do contêiner <div>e cortar o excesso (dependendo da proporção).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

css3 imagem de fundo tamanho do plano de fundo

Você tentou usar isso?

.centered-and-cropped { object-fit: cover }

Eu precisava redimensionar a imagem, centralizar (vertical e horizontalmente) e depois cortá-la.

Fiquei feliz em descobrir que isso poderia ser feito em uma única linha de css. Veja o exemplo aqui: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Aqui está o código CSSe HTMLdesse exemplo:

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

A div que contém essencialmente corta a imagem ocultando o estouro.

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Obrigado sanchothefat.

Eu tenho uma melhoria na sua resposta. Como o recorte é muito personalizado para todas as imagens, essas definições devem estar no HTML, e não no CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

object-fitpode ajudá-lo, se você estiver jogando com <img>tag

O código abaixo cortará sua imagem para você. Você pode brincar com o ajuste do objeto

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Exemplo ao vivo: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Explicação: Aqui a imagem é redimensionada pelo valor de largura e altura da imagem. E a colheita é feita pela propriedade do clipe.

Para obter detalhes sobre a propriedade do clipe, siga: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Na classe de corte, coloque o tamanho da imagem que deseja que apareça:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

O html será parecido com:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

Você pode colocar a tag img em uma tag div e fazer as duas coisas, mas eu recomendaria não dimensionar imagens no navegador. Ele faz um trabalho ruim na maioria das vezes porque os navegadores têm algoritmos de escala muito simplistas. Melhor fazer a escala no Photoshop ou no ImageMagick primeiro e depois atendê-lo ao cliente de maneira agradável e bonita.

O que eu fiz foi criar um script do lado do servidor que redimensione e corte uma imagem na extremidade do servidor, para enviar menos dados pela interweb.

É bastante trivial, mas se alguém estiver interessado, posso desenterrar e postar o código (asp.net)

Existem serviços como o Filestack que farão isso por você.

Eles pegam o URL da imagem e permitem redimensioná-lo usando parâmetros de URL. É bem fácil

Sua imagem ficaria assim depois de redimensionar para 200 x 100, mas mantendo a proporção

O URL inteiro se parece com isso

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

mas a parte importante é apenas

resize=width:200/crop=d:[0,25,200,100]

Tente usar a clip-pathpropriedade:

A propriedade caminho do clipe permite recortar um elemento em uma forma básica ou em uma fonte SVG.

Nota: A propriedade de caminho do clipe substituirá a propriedade de clipe descontinuada.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

Mais exemplos aqui .

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

Se você estiver usando o Bootstrap, tente usar { background-size: cover; }para <div>talvez dar uma classe à div, <div class="example" style=url('../your_image.jpeg');>para que ela se torne div.example{ background-size: cover}

Eu precisava fazer isso recentemente. Eu queria fazer um link em miniatura para um gráfico NOAA. Como o gráfico pode mudar a qualquer momento, eu queria que minha miniatura mudasse. Mas há um problema com o gráfico: ele tem uma borda branca enorme na parte superior; portanto, se você apenas a escala para criar a miniatura, acaba com espaços em branco estranhos no documento.

Aqui está como eu resolvi:

http://sealevel.info/example_css_scale_and_crop.html

Primeiro eu precisava fazer um pouco de aritmética. A imagem original da NOAA tem 960 × 720 pixels, mas os setenta pixels superiores são uma área de borda branca supérflua. Eu precisava de uma miniatura de 348 × 172, sem a área de borda extra na parte superior. Isso significa que a parte desejada da imagem original tem 720 - 70 = 650 pixels de altura. Eu precisava escalar isso para 172 pixels, ou seja, 172/650 = 26,5%. Isso significava que 26,5% de 70 = 19 linhas de pixels precisavam ser excluídas da parte superior da imagem em escala.

Assim…

1. Defina a altura = 172 + 19 = 191 pixels:

   height = 191

2. Defina a margem inferior para -19 pixels (encurte a imagem para 172 pixels de altura):

   margem inferior: -19px

3. Defina a posição superior para -19 pixels (deslocando a imagem para cima, de modo que as 19 linhas principais do pixel transbordem e fiquem ocultas em vez das inferiores):

   top: -19px

O HTML resultante é assim:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Como você pode ver, eu escolhi o estilo da tag <a>, mas você pode estilizar um <div>.

Um artefato dessa abordagem é que, se você mostrar as bordas, a borda superior estará ausente. Desde que eu uso border = 0 de qualquer maneira, isso não foi um problema para mim.

Você pode usar o Serviço de redimensionamento de imagem da Kodem . Você pode redimensionar qualquer imagem com apenas uma chamada http. Pode ser usado casualmente no navegador ou no aplicativo de produção.

• Carregue a imagem em algum lugar de sua preferência (S3, imgur etc.)
• Conecte-o ao seu URL de API dedicado (em nosso painel)