CSS Mostrar una Imagen cambiar de tamaño y Recortada

https://stackoverflow.com/questions/493296

20-08-2019
|

Pregunta

Quiero mostrar una imagen desde una URL con una cierta anchura y altura, incluso si ella tiene un tamaño diferente proporción.Así que quiero cambiar el tamaño (el mantenimiento de la relación) y, a continuación, cortar la imagen al tamaño que quiero.

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

Ejemplo:

En esta imagen:

enter image description here

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://i.stack.imgur.com/wPh0S.jpg">

Que me da esto:

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

Y con background-image Me pueden cortar la imagen 200x100 píxeles.

<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 ambas cosas?
Cambiar el tamaño de la imagen y, a continuación, cortar el tamaño que yo quiera?

Solución

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 margin negativo para mover la imagen dentro de <div/>.

Otros consejos

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

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

Implementado en función de su ejemplo , utilizando donald_duck_4.jpg . En este caso, background-size: cover; es justo lo que desea: se ajusta a <div> para cubrir el área completa de la <=> que contiene y recorta 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>

css3 background-image background-size

Intenta usar esto?

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

Necesitaba cambiar el tamaño de la imagen, en el centro (vertical y horizontal) y de recorte.

Yo estaba feliz de encontrar, que no podría realizarse en un solo css-line.Ver el ejemplo aquí: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Aquí está el CSS y HTMLcódigo de 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 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>

object-fit puede ayudarlo si está jugando con <img> etiqueta

El siguiente código recortará su imagen por usted. Puedes jugar con object-fit

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

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

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

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/ 16/01 / comprensión-la-propiedad-clip-css /

Puede colocar la etiqueta img en una etiqueta div y hacer ambas cosas, pero recomendaría no escalar las imágenes en el navegador. Hace un mal trabajo la mayor parte del tiempo porque los navegadores tienen algoritmos de escala muy simples. 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 usando 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]

<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 el <div> tal vez le dé 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 podría cambiar en cualquier momento, quería que mi miniatura cambiara con él. 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 la miniatura, terminará 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 960 & # 215; 720 píxeles, pero los setenta píxeles superiores son un área de borde blanco superflua. Necesitaba un 348 & # 215; 172 miniatura, 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 de la parte superior de la imagen escalada.

Entonces & # 8230;

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

height=191
Establezca el margen inferior a -19 píxeles (acortando la imagen a 172 píxeles de alto):

margin-bottom:-19px
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 & amp; están ocultas en lugar de las inferiores):

top:-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 al < a > etiqueta, pero puede aplicar un estilo a < div > ;, en su lugar.

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow