Quiero cargar algunas fotos de un servidor y mostrarlas en una caja propia de tal manera que la caja esté llena y la imagen esté centrada (no estirada), si es demasiado grande. ¿Puedo lograr esto, por ejemplo, con CSS sin saber el tamaño de cada imagen? Tal vez con ancho máximo o menos?¿Cómo puedo colocar una imagen en un recuadro de manera que se ajuste exactamente a su ancho o alto, lo que sea más pequeño?
Aquí es un ejemplo de lo que quiero:
Puede usar la propiedad CSS3 background-size.
Específicamente, usaría background-size:contain o background-size:cover.
De la especificación:
valores tienen los siguientes significados:
'contienen'
escala de la imagen, mientras que preserva su relación de aspecto intrínseco (si existe), a el tamaño más grande de modo que tanto su ancho como su altura puedan caber dentro del área de posicionamiento de fondo.
‘cobertura’
escala de la imagen, mientras que preserva su relación de aspecto intrínseco (si existe), al tamaño más pequeño de tal manera que tanto su anchura y su altura pueden cubrir completamente el área de fondo de posicionamiento.
Fuente: http://www.w3.org/TR/css3-background/#the-background-size
Cuál ha utilizado dependerá de la relación de aspecto de las imágenes originales que está utilizando.
de desplazamiento hacia abajo de este recurso para ver algunos ejemplos: http://www.css3.info/preview/background-size/
Perfecto. ¡Exactamente lo que quería! ¡Muchas gracias! – AME
Me alegro de poder ayudar @AME! –
La cosa más rápida que se puede hacer es poner la imagen como imagen de fondo que se centra como:
style="background: url(images/42.png) 50% 50% no-repeat"
Imágenes más pequeño que la caja se centrará en la caja. Las imágenes que son más grandes experimentarán el recorte.
El inconveniente es que no hay escalado.
Para escalar, debe conocer las dimensiones, utilizar algunas matemáticas para calcular una cantidad de escala que conservará la relación de aspecto y usar un elemento real que se encuentra dentro de un contenedor de recorte que utiliza "desbordamiento: oculto".
Aquí lo que haces. Si, por ejemplo, la imagen está dentro de un DIV con un ID llamado "boxer" Ahora creará un CSS que automáticamente cambiará el tamaño de cada imagen que está dentro del DIV con el ID "boxer" El CSS se verá así
#boxer img {
Width: 600px
Height: 600px;
}
El CSS anterior volverá a clasificar automáticamente cualquier imagen que ponga dentro de las especificaciones en el CSS.Esto encajará en la caja con el ID "boxeador" precisamente si las dimensiones corresponden a la del CSS. Podrías hacer un 100% tanto para el ancho como para la altura, de esa manera se ajusta a la caja.
Esto estiraría la imagen y destruiría sus proporciones – AME
¿Lo escupió en html o tiene algo del lado del servidor procesándolo? –