CSS Exibe uma imagem redimensionada e recortada

Question

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

I pode redimensionar com a propriedade html img e posso cortar com background-image.
Como posso fazer as duas coisas?

Exemplo:

Esta imagem:

Tem os pixels tamanho 800x600 e eu quero mostrar como uma imagem de 200x100 pixels

Com img posso redimensionar a 200x150px imagem:

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

Isso dá-me isto:

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

E com background-image posso cortar os pixels de imagem 200x100.

<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, em seguida, cortá-lo do tamanho que eu quero?

Answer 1

Você pode usar uma combinação dos dois 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 margin negativo para mover a imagem ao redor dentro do <div/>.

Answer 2

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

Há um monte de exemplos em css3.info .

implementado com base no seu exemplo , usando donald_duck_4.jpg . Neste caso, background-size: cover; é apenas o que você quer -. Ele se encaixa o background-image para cobrir toda a área da contendo <div> e clips o excesso (dependendo da relaçã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 background-image background-size

Answer 3

Você tentou usar isso?

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

Eu precisava redimensionar imagem, centro (vertical e horizontalmente) e de culturas-lo.

Eu estava feliz de encontrar, que poderia ser feito em uma única linha css. Verifique o exemplo aqui: http://codepen.io/chrisnager/pen/azWWgr/ ? editores = 110

---

Aqui está a CSS e HTMLcode desse 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">

Answer 4

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

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

O div que contém essencialmente com cortar a imagem, ocultando o transbordamento.

Answer 5

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

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

Answer 6

Graças sanchothefat.

Eu tenho uma melhoria para a sua resposta. Como cultura é muito adaptados para cada imagem, esta definição deve estar no HTML em vez de CSS.

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

Answer 7

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

O código abaixo irá cortar a imagem para você. Você pode brincar com objeto-fit

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

Answer 8

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

Answer 9

Na classe colheita, coloque o tamanho da imagem que você quer 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á semelhante a:

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

Answer 10

<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;
}

Answer 11

Exemplo 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 imagem é redimensionada pelo valor de largura e altura da imagem. E colheita é feita por propriedade do clipe.

Para obter detalhes sobre clipe de propriedade a seguir: http://tympanus.net/codrops/2013/ 01/16 / entendimento-the-css-clip-propriedade /

Answer 12

Você pode colocar a tag img em uma tag div e fazer as duas coisas, mas eu recomendaria contra escalonamento de imagens no navegador. Ele faz um péssimo trabalho na maioria das vezes porque os navegadores têm algoritmos de escalonamento muito simplistas. Melhor para fazer o seu escalonamento no Photoshop ou ImageMagick primeiro, depois servi-lo até o bom cliente e bonita.

Answer 13

O que eu tenho feito é criar um script do lado do servidor que irá redimensionar e recortar uma imagem na extremidade do servidor por isso vai enviar menos dados através do interweb.

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

Answer 14

Existem serviços como pilha de documentos que vai fazer isso para você.

Eles pegue a sua imagem url e permitem que você redimensioná-la usando parâmetros de URL. É muito fácil.

A sua imagem ficaria assim depois de redimensionar a 200x100, mas mantendo a relação de aspecto

a URL inteira 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 mais importante é apenas

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

Answer 15

<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*/
}

Answer 16

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

Answer 17

I needed to do this recently. I wanted to make a thumbnail-link to a NOAA graph. Since their graph could change at any time, I wanted my thumbnail to change with it. But there's a problem with their graph: it has a huge white border at the top, so if you just scale it to make the thumbnail you end up with extraneous whitespace in the document.

Here's how I solved it:

http://sealevel.info/example_css_scale_and_crop.html

First I needed to do a little bit of arithmetic. The original image from NOAA is 960 × 720 pixels, but the top seventy pixels are a superfluous white border area. I needed a 348 × 172 thumbnail, without the extra border area at the top. That means the desired part of the original image is 720 - 70 = 650 pixels high. I needed to scale that down to 172 pixels, i.e., 172 / 650 = 26.5%. That meant 26.5% of 70 = 19 rows of pixels needed to be deleted from the top of the scaled image.

So…

1. Set the height = 172 + 19 = 191 pixels:

   height=191

2. Set the bottom margin to -19 pixels (shortening the image to 172 pixels high):

   margin-bottom:-19px

3. Set the top position to -19 pixels (shifting the image up, so that the top 19 pixel rows overflow & are hidden instead of the bottom ones):

   top:-19px

The resulting HTML looks like this:

<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>

As you can see, I chose to style the containing <a> tag, but you could style a <div>, instead.

One artifact of this approach is that if you show the borders, the top border will be missing. Since I use border=0 anyhow, that wasn't an issue for me.