Ajustar tamaño imágenes librería magnifier.js?

[helacer]

Buenas

estoy desarrollando un catalogo de productos php y jquery... para eso estoy usando la libreria magnifuer,js

http://mark-rolich.github.io/Magnifier.js/

El problema esta en que si el contenedor de la imagen mide 150px x 160px. Las imágenes deben medir ese tamaño exacto o sino se descuadran se ven partidas etc.


Algunas de las imágenes que uso son mas grandes... la solución par el ancho es fácil... le coloco el estilo width:100%.... al quemarle el alto también se soluciona el problema pero queda la imagen estirada.... lo que quiero es que si la imagen mide 200px x 100px... quede de 150 de ancha x 100 de alta y quede centrada verticalmente en el contenedor sin que se descuadre al mostrar la sotras imagenes del producto.

[sugar_rayy]

hola helecer

yo desde wordpress por ejemplo trabajo las imagenes destacadas de portada asi

Código HTML:

<div class="img_thumb_left" style="background-image: url(http://mipagina.com/wp-content/uploads/2016/03/mifoto.jpg)"></div> 

y luego trabajo el css del contenedor asi

Código:

.img_thumb_left {
    width: 394px;
    height: 211px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

de esta manera se mantiene la relacion de aspecto siempre y el area de la imagen se respeta por las medidas de ancho y alto que le des a la propiedad de la clase

trata de llamar la imagen desde el atributo style del div para que puedas manipularla con propiedad

Código:

background-size: cover;

que mantiene la relacion de aspecto original de la imagen.

[helacer]

Gugar gracias por su respuesta .... me parece interesante la solución que me plantea... El problema esque esta es una librería prefabricada me tocaría reprogramarla para que cargue la imagen como le lo plantea...lo que hace la librería es pintarme dentro del div un <img src=""> ... puedo implementar una solución con css de esta manera???

[sugar_rayy]

bueno ahí cambia la cosa, pero depende de como este implementada

estuve mirando el plugin pero si tuvieras algo en producción que pudieras referenciar acá seria mas cómodo para poder hacer algunas insiciones y urgetear el código para tu caso en particular.