redimensionar - tamaño de imagen html

CSS muestra una imagen redimensionada y recortada

Question

Quiero mostrar una imagen desde 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 proporción) y luego cortar la imagen al tamaño que quiero.

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

Ejemplo:

Esta imagen:

Tiene el tamaño de 800x600 píxeles y quiero mostrar como una imagen de 200x100 píxeles

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

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

Eso me da esto:

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

Y con background-image puedo cortar la imagen de 200x100 píxeles.

<div 
    style="background-image:
           url(''http://img1.jurko.net/wall/paper/donald_duck_4.jpg''); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Me da:

<div style="background-image:url(''http://img1.jurko.net/wall/paper/donald_duck_4.jpg''); width:200px; height:100px; background-position:center;">&nbsp;</div>

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

Answer 1

object-fit puede ayudarte, si estás jugando con la etiqueta <img>

El siguiente código recortará tu imagen por ti. Puedes jugar con objetos

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

Answer 2

¿Intentaste usar esto?

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

Necesitaba cambiar el tamaño de la imagen, el centro (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 CSS y HTML de ese ejemplo:

CSS:

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

HTML:

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

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

Hay un montón de ejemplos en css3.info .

Implementado en base a su ejemplo , usando donald_duck_4.jpg . En este caso, background-size: cover; es justo lo que desea: se ajusta a la background-image para cubrir el área completa de <div> contiene y recorta el exceso (según la proporción).

.with-bg-size {
  background-image: url(''http://img1.jurko.net/wall/paper/donald_duck_4.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 4

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 se redimensiona por el ancho y el valor de altura de la imagen. Y el recorte se realiza mediante la propiedad clip.

Para obtener más información sobre la propiedad del clip, visite: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 5

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á como:

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

Answer 6

Gracias sanchothefat.

Tengo una mejora en su respuesta. Como el recorte 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>

Answer 7

Hay services como Filestack que harán esto por ti.

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

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

La url entera 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]

Answer 8

Lo que he hecho es crear una secuencia de comandos del lado del servidor que cambiará el tamaño 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)

Answer 9

Necesitaba hacer esto recientemente. Quería hacer un enlace en miniatura a un gráfico NOAA. Ya que su gráfica podría cambiar en cualquier momento, quería que mi miniatura cambiara con ella. Pero hay un problema con su gráfico: tiene un borde blanco enorme en la parte superior, por lo que si lo escala para hacer que la imagen en miniatura termine con espacios en blanco extraños 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 superfluo. 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 tiene una altura de 720 - 70 = 650 píxeles. 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.

Asi que…

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

   altura = 191

2. Establezca el margen inferior en -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 de los 19 píxeles más se desborden y se oculten en lugar de las de abajo):

   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í aplicar un estilo a la etiqueta <a> que contiene, pero en su lugar podría aplicar un estilo a <div>.

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

Answer 10

Podría usar una combinación de ambos métodos, por ejemplo.

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

CSS:

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

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

Puede usar un margin negativo para mover la imagen dentro de <div/> .

Answer 11

Puede poner la etiqueta img en una etiqueta div y hacer ambas cosas, pero recomendaría no escalar las 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 hacer primero su escalado en Photoshop o ImageMagick, y luego entregarlo al cliente de forma agradable y bonita.

Answer 12

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

Answer 13

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

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

.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 ocultando el desbordamiento.

Answer 16

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

Answer 17

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

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