CSS muestra una imagen redimensionada y recortada

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

Puedo cambiar el tamaño con imgla propiedad html y puedo cortar con background-image.
¿Cómo puedo hacer ambas cosas?

Ejemplo:

Esta imagen:

ingrese la descripción de la imagen aquí

Tiene el tamaño 800x600de píxeles y quiero mostrarlo como una imagen de 200x100píxeles.

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

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

Eso me da esto:

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

Expandir fragmento

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>

Expandir fragmento

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

Jan 30 '09 03:01 InfoStatus

Podría utilizar 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>

Expandir fragmento

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

Jan 29 '2009 20:01 roborourke

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

Hay un montón de 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 corta el exceso (dependiendo de la proporció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>

Expandir fragmento

css3 imagen de fondo tamaño de fondo

Feb 05 '2012 12:02 Joel Purra

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

Expandir fragmento

May 10 '2015 10:05 Anatolii Stepaniuk