javascript - attribute - title css

Escala CSS e imagen de recorte de centro cuadrado

Question

Así que tengo una colección de miniaturas en mi aplicación, que es del tamaño de 200x200 . A veces, la imagen original no tiene esta proporción, así que planeo recortar esta imagen a un cuadrado.

Actualmente solo hace que la imagen se ajuste a la imagen en miniatura, así que diga que mi tamaño de imagen original es 400x800 , luego la imagen se ve muy aplastada. Quería recortar esta imagen para que mire la anchura / altura más corta y luego recortarla a un cuadrado, por lo que en mi ejemplo anterior se recortará a 400x400 .

¿Hay una manera de hacer esto fácilmente a través de CSS o tengo que usar algún tipo de JS para hacer esto?

Answer 1

Puedes hacer esto fácilmente en CSS si usas imagen de fondo.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

En este violín, la primera imagen es 400x800, la segunda imagen es 800x400:

http://jsfiddle.net/samliew/tx7sf

Answer 2

Se me ocurrió mi propia solución y pensé en compartirla aquí en caso de que alguien más encontrara este hilo. La solución de cobertura de tamaño de fondo es la más fácil, pero necesitaba algo que también funcionara en IE7. Esto es lo que se me ocurrió usando jQuery y CSS.

Nota: Mis imágenes eran imágenes de "perfil" y debían recortarse a cuadrados. De ahí algunos nombres de funciones.

jQuery:

cropProfileImage = function(pic){
    var h = $(pic).height(),
        w = $(pic).width();

    if($(pic).parent(''.profile-image-wrap'').length === 0){
                     // wrap the image in a "cropping" div
         $(pic).wrap(''<div class="profile-image-wrap"></div>'');
    }

      if(h > w ){
          // pic is portrait
          $(pic).addClass(''portrait'');
          var m = -(((h/w) * 100)-100)/2; //math the negative margin
          $(pic).css(''margin-top'', m + ''%'');    
      }else if(w > h){ 
          // pic is landscape
          $(pic).addClass(''landscape''); 
          var m = -(((w/h) * 100)-100)/2;  //math the negative margin
          $(pic).css(''margin-left'', m + ''%'');
      }else {
        // pic is square
        $(pic).addClass(''square'');
      }
 }

// Call the function for the images you want to crop
cropProfileImage(''img.profile-image'');

CSS

.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */

.profile-image-wrap { 
      /* whatever the dimensions you want the "cropped" image to be */
      height: 8em;
      width: 8em;
      overflow: hidden; 
 }

.profile-image-wrap img.square {
      visibility: visible;
      width: 100%;  
 }

 .profile-image-wrap img.portrait {
      visibility: visible;
      width: 100%;
      height: auto;
 }

 .profile-image-wrap img.landscape {
      visibility: visible;
      height: 100%;
      width: auto;
 }

Answer 3

Actualizado para manejar casos donde el ancho de la imagen es mayor que la altura.

Puedes hacer esto con CSS puro. Establezca el elemento contenedor de cada imagen para tener altura, ancho y overflow: hidden fijos overflow: hidden . Luego configura la imagen para que tenga min-width: 100% , un min-height: 100% . Cualquier altura o ancho adicional desbordará el contenedor y quedará oculto.

HTML

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

CSS

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

Eche un vistazo a http://jsfiddle.net/thefrontender/XZP9U/5/