Foros del Web » Programando para Internet » Javascript » Frameworks JS »

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

Estas en el tema de Ajustar tamaño imágenes librería magnifier.js? en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/04/2016, 20:29
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.061
Antigüedad: 15 años, 2 meses
Puntos: 50
Ajustar tamaño imágenes librería magnifier.js?

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.


  #2 (permalink)  
Antiguo 07/04/2016, 16:26
Avatar de sugar_rayy  
Fecha de Ingreso: abril-2016
Mensajes: 3
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Ajustar tamaño imágenes librería magnifier.js?

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.
  #3 (permalink)  
Antiguo 07/04/2016, 21:44
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.061
Antigüedad: 15 años, 2 meses
Puntos: 50
Respuesta: Ajustar tamaño imágenes librería magnifier.js?

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

Última edición por helacer; 07/04/2016 a las 21:54
  #4 (permalink)  
Antiguo 08/04/2016, 21:25
Avatar de sugar_rayy  
Fecha de Ingreso: abril-2016
Mensajes: 3
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Ajustar tamaño imágenes librería magnifier.js?

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.

Etiquetas: javascript, php, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:04.