Pequeño truco para cambiar el tamaño de la proporción de las imágenes.
Digamos que tenemos una imagen con una proporción de 1:1 y queremos cambiarla a una proporción de 16:9.
Calcular el tamaño de recorte
Primero calcule el tamaño que necesita para recortar la imagen:
9/16= 56.25(%) /*tamaño porcentual de la imagen después del recorte*/
100-56,25 =43,75(%) /*valor porcentual del recorte*/
44 / 2 = 21.875(%) /*cada lado*/
Base HTML & CSS
HTML
<figure>
<img src="image-name.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}
Añadir Estilos de Recorte
Ahora sólo hay que añadir margen negativo a la imagen
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
DEMOS EN VIVO
Segundo Método, Añadir Altura
Ahora vamos a ir por el camino contrario. Digamos que tenemos una imagen con un tamaño de ratio de 16:9 y queremos cambiarla a un tamaño de ratio de 1:1.
Calcular tamaño adicional
- 16/9 = 1.7777 /*Tamaño de la relación que falta para la relación 1:1*/
- 1,777 * 100 = 177,77(%) /*Tamaño de la imagen antes del recorte*/
- 177.77-100 = 77,77 /*tamaño adicional que se recortará*/
- 77,77/2 = 38.885(%) /*tamaño adicional que se recortará cada tamaño*/
Base HTML & CSS
HTML
<figure>
<img src="image-name2.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
}
Agregar Estilos de Recorte
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
DEMOSTRACIÓN EN VIVO
Eso es todo, espero que lo disfruten.
Más posts de CSS que escribí:
CSS Position Sticky – ¡Cómo funciona realmente!
¡Nuevas propiedades lógicas de CSS!
La nueva evolución del diseño responsivo
Arquitectura CSS para múltiples sitios web con SASS
Los métodos de cuadrícula CSS
¡Cómo convertirse en un ninja de la cuadrícula CSS!
Vídeos CSS recomendados, canales y listas de reproducción
Sígueme en:
Mi Twitter
Mi empresa
Puedes encontrarme en mis grupos de facebook:
CSS Masters
CSS Masters Israel