Problema: que estoy tratando de colocar las imágenes en el responsive grid system de de Twitter Bootstrap, por lo que se ampliará en el espacio dado (para el tamaño de CSS sensible de la columna será diferente para diferentes dispositivos). Quiero que encajen en la relación de aspecto; supongamos que es un cuadrado.Recorte de la imagen de relación de aspecto en la rejilla de respuesta de arranque
Standard CSS cropping technique no funcionan si quiero que Bootstrap vuelva a escalar las imágenes para que se ajusten al diseño de la cuadrícula. Los márgenes negativos solo funcionan para cortar la parte superior e inferior, cuando se debe cortar la altura de la imagen y el ancho no se modifica (por ejemplo, para colocar la imagen vertical en el cuadrado).
He encontrado que this technique para especificar la relación de aspecto para cortar el ancho sin modificar la altura (poner la imagen de paisaje en el cuadrado) funciona bien con la escala de Bootstrap.
The example (jsfiddle) de las imágenes recortadas para el tamaño 1600x400 y 400x1600. Hasta ahora lo he comprobado en Chrome y Safari actuales. Editar: Se corrigió que también funcionaba en Firefox.
Pregunta: ¿Cómo puedo hacerlo de una manera para ambos: cortar el ancho y la altura. ¿Cómo hacer recortes arbitrarios en una imagen, eligiendo el rectángulo, para que Bootstrap los vuelva a escalar correctamente? ¿Cómo puedo recortar a una relación de aspecto sin el conocimiento previo del tamaño de la imagen?
¡Gracias por cualquier idea!
Se ven muy bien y funciona, pero está diseñado para el caso en que centrar la imagen recortada. Necesito usar es donde puedo elegir cuánto recortar de ambos lados (por ejemplo, la cara de la persona está en la parte superior y siempre tengo que mostrarla). Mi idea permite hacer eso y no tengo idea de cómo manejar el fondo en CSS :(Su solución se ve muy bien, no necesito saber la relación de aspecto de la imagen, por lo que sería genial si pudiera usar eso. Ideal sería si pudiera marcar el punto y exigir que esté lo más cerca posible del centro, pero supongo que es la pregunta diferente. De todos modos, ¡gracias! –
Creo que estoy deseando mucho. Mover la imagen recortada del centro y sin saber la relación de aspecto? Me estoy volviendo un poco académico, ya tengo lo que puedo usar :) ¡Gracias de nuevo! –
:) Podría usar clases adicionales y colocar el fondo en% o arriba/abajo/izquierda/derecha para mover la imagen, pero por supuesto sería un trabajo manual establecer esto correctamente. http://jsfiddle.net/willemvb/wAqSV/4/ –