Rails ¿Reescalado de la imagen en la pantalla de visualización?

Question

¿Cómo puedo cambiar el tamaño de una imagen existente a, por ejemplo, "260x180?"

Actualmente uso Carrierwave y Rmagick para cargar imágenes en mi depósito de almacenamiento de Amazon S3, y crea 2 versiones de la imagen: la original y la versión de pulgar (70x70).

Ahora, sé que puedo crear otra versión para que se creen tres versiones, incluida la 260x180, pero sentí que eso estaba sobre-obstruyendo la base de datos de almacenamiento, y me preguntaba si podría hacerlo en una nivel de vista.

me trataron

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

pero parece que no está funcionando - las imágenes no son idénticos tamaños.

Además, si la imagen es más pequeña que mi resultado deseado, ¿tengo que hacer algo diferente a las imágenes que son más grandes? Por ejemplo, ¿necesito cortar los más grandes, pero ampliar los más pequeños, o se escalará automáticamente al tamaño deseado?

Answer 1

Como @Yosep dijo, no hay nada mágico de rieles pasando aquí. <%= image_tag %> genera una etiqueta <img> en el resultado html. si pasa un :size => '260x180', la etiqueta resultado <img> tendrá su conjunto width y height a 260 y 180.

Aquí viene la respuesta a su pregunta. La mejor manera de proporcionar otro tamaño de imagen es la forma en que rechazó el inicio. Necesita cambiar el tamaño de esas imágenes en el back-end y almacenarlas en algún lugar.

Al cambiar el tamaño de la imagen configurando el ancho y la altura de <img>, la etiqueta no conservará la relación de aspecto original de la imagen. si la proporción original es 260: 180, está bien. Pero si no, el resultado será feo. Además, hay otro inconveniente de hacerlo, que es la misma razón por la que no debe cambiar el tamaño de la imagen utilizando CSS también. Cambiar el tamaño de las imágenes grandes por otras más pequeñas en el lado del cliente eventualmente será una gran pérdida de su red, y al hacerlo, se ralentizará la renderización de su sitio. Esa es una de las reglas de YSlow.

Para cambiar el tamaño de la imagen usando CSS, puede usar max-width y max-height, las imágenes más grandes se redimensionarán en consecuencia, las más pequeñas no se redimensionarán.

Answer 2

¿En una vista, sin procesar una imagen nueva? Por convención, usarías CSS.

.image_container img { 
    width: 260px; 
    height: 180px 
} 

Y aquí están algunas formas interesantes de cultivo con CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

todos los carriles hace, al ver su código, es convertir

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

en algo así como

<image tag="image.jpg" width="260" height="190" ../> 

en la página (HTML).

Dicho esto, si el código no se ve como que está funcionando, intenta asignar una clase CSS a ella:

.image-size { 
    max-width: 300px; 
    max-height: 200px; 
} 

Answer 4

Si lo desea, puede utilizar nuestro redimensionamiento automático de imágenes en la nube.Por ejemplo, el siguiente comando redimensionaría la imagen para llenar un rectángulo de 260x180.

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %> 

Este blog post describe cómo utilizar CarrierWave mientras que todas las imágenes se almacenan en la nube, entregados a través de un CDN rápido y todas las transformaciones se realizan de forma dinámica en la nube (sin necesidad de instalar RMagick).