CSS Muestra una imagen redimensionada y recortada

Quiero mostrar una imagen de una URL con un cierto ancho y alto, incluso si tiene una relación de tamaño diferente. Así que quiero cambiar el tamaño (manteniendo la relación) y luego cortar la imagen al tamaño que quiero.

Puedo cambiar el tamaño con la imgpropiedad html y puedo cortar con background-image.
¿Cómo puedo hacer las dos cosas?

Ejemplo:

Esta imagen:

Tiene el tamaño de 800x600píxeles y quiero mostrar como una imagen de 200x100píxeles

Con imgpuedo cambiar el tamaño de la imagen 200x150px:

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

Eso me da esto:

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

Y con background-imagepuedo cortar los 200x100píxeles de la imagen .

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

Me da

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

¿Cómo puedo hacer las dos cosas?
¿Cambiar el tamaño de la imagen y luego cortarla del tamaño que quiero?

Puede usar una combinación de ambos métodos, por ejemplo.

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

Puede usar negativo marginpara mover la imagen dentro del <div/>.

Con CSS3 es posible cambiar el tamaño de un background-imagecon background-size, cumpliendo ambos objetivos a la vez.

Hay muchos ejemplos en css3.info .

Implementado según su ejemplo , usando donald_duck_4.jpg . En este caso, background-size: cover;es justo lo que desea: se ajusta background-imagepara cubrir toda el área del contenedor <div>y recorta el exceso (dependiendo de la relación).

.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 imagen de fondo tamaño de fondo

¿Intentaste usar esto?

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

Necesitaba cambiar el tamaño de la imagen, centrarla (tanto vertical como horizontalmente) y luego recortarla.

Me alegró descubrir que se podía hacer en una sola línea CSS. Consulte el ejemplo aquí: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Aquí está el código CSSy HTMLde ese ejemplo:

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

El div que contiene esencialmente recorta la imagen al ocultar el desbordamiento.

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

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

Gracias sanchothefat.

Tengo una mejora en tu respuesta. Como crop está muy adaptado para cada imagen, estas definiciones deben estar en HTML en lugar de 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-fitpuede ayudarte, si estás jugando con la <img>etiqueta

El siguiente código recortará su imagen por usted. Puedes jugar con el ajuste de objetos

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

Ejemplo en 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);
      }

Explicación: Aquí la imagen cambia de tamaño según el valor de ancho y alto de la imagen. Y el recorte se realiza mediante la propiedad de clip.

Para obtener detalles sobre la propiedad del clip, siga: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

En la clase de recorte, coloque el tamaño de imagen que desea que aparezca:

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

El html se verá así:

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

Puede poner la etiqueta img en una etiqueta div y hacer ambas cosas, pero recomendaría no escalar imágenes en el navegador. Hace un trabajo pésimo la mayor parte del tiempo porque los navegadores tienen algoritmos de escala muy simplistas. Es mejor escalar primero en Photoshop o ImageMagick, y luego servirlo al cliente agradable y bonito.

Lo que he hecho es crear un script del lado del servidor que redimensionará y recortará una imagen en el extremo del servidor para que envíe menos datos a través del interweb.

Es bastante trivial, pero si alguien está interesado, puedo desenterrar y publicar el código (asp.net)

Hay servicios como Filestack que harán esto por usted.

Toman su url de imagen y le permiten cambiar su tamaño utilizando los parámetros de url. Es bastante fácil

Su imagen se vería así después de cambiar el tamaño a 200x100 pero manteniendo la relación de aspecto

Toda la url se ve así

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

pero la parte importante es solo

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

Intenta usar la clip-pathpropiedad:

La propiedad clip-path le permite recortar un elemento a una forma básica o a una fuente SVG.

Nota: La propiedad de ruta de clip reemplazará la propiedad de clip en desuso.

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

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

Más ejemplos aquí .

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

Si está usando Bootstrap, intente usar { background-size: cover; }para <div>tal vez darle al div una clase que diga <div class="example" style=url('../your_image.jpeg');>para que se convierta div.example{ background-size: cover}

Necesitaba hacer esto recientemente. Quería hacer un enlace en miniatura a un gráfico NOAA. Como su gráfico podía cambiar en cualquier momento, quería que mi miniatura cambiara con él. Pero hay un problema con su gráfico: tiene un enorme borde blanco en la parte superior, por lo que si lo escala para hacer la miniatura, terminará con un espacio en blanco extraño en el documento.

Así es como lo resolví:

http://sealevel.info/example_css_scale_and_crop.html

Primero necesitaba hacer un poco de aritmética. La imagen original de NOAA es de 960 × 720 píxeles, pero los setenta píxeles superiores son un área de borde blanco superflua. Necesitaba una miniatura de 348 × 172, sin el área de borde adicional en la parte superior. Eso significa que la parte deseada de la imagen original es 720 - 70 = 650 píxeles de alto. Necesitaba reducir eso a 172 píxeles, es decir, 172/650 = 26.5%. Eso significaba que el 26,5% de 70 = 19 filas de píxeles debían eliminarse desde la parte superior de la imagen escalada.

Entonces…

1. Establezca la altura = 172 + 19 = 191 píxeles:

   altura = 191

2. Establezca el margen inferior a -19 píxeles (acortando la imagen a 172 píxeles de alto):

   margen inferior: -19px

3. Establezca la posición superior en -19 píxeles (desplazando la imagen hacia arriba, de modo que las filas superiores de 19 píxeles se desborden y se oculten en lugar de las inferiores):

   arriba: -19px

El HTML resultante se ve así:

<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 puede ver, elegí darle estilo a la etiqueta <a> que contiene, pero podría darle un estilo a <div>.

Un artefacto de este enfoque es que si muestra los bordes, faltará el borde superior. Como uso border = 0 de todos modos, eso no fue un problema para mí.

Puede usar el servicio de cambio de tamaño de imagen de Kodem . Puede cambiar el tamaño de cualquier imagen con solo una llamada http. Puede usarse casualmente en el navegador o en su aplicación de producción.

• Cargue la imagen en el lugar que prefiera (S3, imgur, etc.)
• Conéctelo a su URL de API dedicada (desde nuestro panel de control)