Anónimo
Estandarizar imágenes con tamaño distinto
Estoy haciendo un portal web. Se trataría de un portal de eventos.
En la página principal debo de mostrar un listado de los eventos futuros. Cada evento ocuparía una línea (todo estaría contenido en un div). En esa línea se debería de mostrar:
a) Una imagen que ilustra el evento
b) Los detalles del evento: fecha, lugar, precio, etc.
Tanto las imágenes como los detalles de los eventos son introducidos por los usuarios autorizados del sistema, lo cual significa que cada imagen puede tener un tamaño (alto por ancho) particular. Me gustaría mostrar la imagen de cada evento con un tamaño definido fijo pero que ésto no afectara a la proporción de la imagen.
¿Cómo podría hacer esto para que el tamaño particular de cada imagen no me desluzca todo el diseño?. Me gustaría poder acompañar la pregunta con una imagen ilustrativa pero creo que no se puede hacer.
En la página principal debo de mostrar un listado de los eventos futuros. Cada evento ocuparía una línea (todo estaría contenido en un div). En esa línea se debería de mostrar:
a) Una imagen que ilustra el evento
b) Los detalles del evento: fecha, lugar, precio, etc.
Tanto las imágenes como los detalles de los eventos son introducidos por los usuarios autorizados del sistema, lo cual significa que cada imagen puede tener un tamaño (alto por ancho) particular. Me gustaría mostrar la imagen de cada evento con un tamaño definido fijo pero que ésto no afectara a la proporción de la imagen.
¿Cómo podría hacer esto para que el tamaño particular de cada imagen no me desluzca todo el diseño?. Me gustaría poder acompañar la pregunta con una imagen ilustrativa pero creo que no se puede hacer.
Respuesta de jordikid
1
Si los usuarios autorizados suben imágenes sin respetar un tamaño estándar lo que podrías hacer es darle un ancho fijo y un alto máximo. Me explico, normalmente cuando se hace una ficha de evento como la que quieres hacer tú, lo más importante es el ancho (normalmente siempre tiene que ser el mismo). Sin embargo el alto siempre puede variar un poquito ( no mucho tampoco ). Teniendo en cuenta que los usuarios autorizados van a ir un poquito con sentido común y no van a subir fotos verticales sabiendo que en las fichas las fotos son horizontales (o cuadradas), fijamos un ancho fijo y para que no se deforme la imagen dejamos el alto libre para que se reduzca sin problemas. Por último, por si algún usuario autorizado no tiene mucho sentido común le damos un alto máximo para que no nos joda el diseño de la página (que es el objetivo).
#nombredeldiv img{
width: 200px;
max-height: 300px;
}
#nombredeldiv img{
width: 200px;
max-height: 300px;
}