Album de Imagenes

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Temática

Queridos lectores en esta ocasión vengo a proponer una de las tantas soluciones que se le puede dar al momento de querer colocar en nuestro sitio web, varias imágenes una seguida de la otra, ya bien sea para una especie de album de imágenes o solo colocar una sección con 2 imágenes una seguida de la otra.

Problemática

La problemática que se suele presentar es que, las imágenes que disponemos para colocar en nuestro sitio, no sean exactamente de las mismas dimensiones, ocasionando que nuestro sitio se vea algo desorganizado al colocarlas. Podría verse algo como esto:

album imagenes

y lo que deseamos es que se vea esto (con las mismas imágenes sin importar las dimensiones que se tengan):

album imagenes

Mas organizado no?

Muchos cometen el error de asignarle por CSS valores a los atributos width y height de tal manera que las 2 imagenes tengan las mismas dimensiones. Tamaño error dado que puede distorsionar la imagen y el efecto seria devastador.

Hay otras soluciones que les suelen dar que son erradas pero no las comentaré todas (Cualquier cosa me comentan y les doy respuesta).

Solución

Para solucionar esto, vamos a crear unos DIV con el mismo tamaño donde irán las imágenes. Usaré las propiedades width y height del DIV, no de la imágen (etiqueta img) porque distorsionaría la imagen:

album imagenes

Hasta ahora tenemos 2 DIV con un ancho y un alto especifico. Como los 2 tienen la misma clase (box-imagen), estos tendrán el mismo tamaño.

Ahora insertamos las imágenes:album imagenes

Calma, hasta ahora no hemos solucionado. La clave está en cubrir todo el espacio de los DIV con la imagen correspondiente. Y por lógica podremos usar las propiedades de CSS llamadas, min-height y min-width. Con ellas haremos que las imágenes tengan un mínimo de ancho igual al 100% del ancho de su contenedor (DIV) y un minimo de height igual al 100% de su contenedor. Con esto obligamos a que las imágenes no tengan un tamaño menos a esto porque quedará un espacio vacío dependiendo de las dimensiones de la imagen:

album imagenes

Adicional a esto, para que las imágenes mantengan sus justas proporciones (no se distorsionen) debemos agregar un valor al width de la imagen y el valor de “auto” al height de la imagen. En este caso le daremos un width del 100% ya que necesitamos que cubra todo el ancho de su contenedor. También le colocaremos la propiedad overflow con el valor de “hidden” al contenedor de las imágenes , ya que las imágenes no necesariamente tendrán las mismas proporciones que el contenedor y provocará que las imágenes se salgan del área de su contenedor provocando la problemática del principio:

album imagenes

Hasta hace poco pensé que me había ganado el cielo con esto pero no, me resolvió en imágenes mas anchas que altas pero cuando coloqué una imagen mas alta que ancha, se echó a perder. Averiguando encontré una propiedad CSS llamada object-fit. Esta toma valores parecidos a la propiedad background-size (en un tiempo solucionaba esta temática con el background-size pero me di cuenta que el SEO de los sitios no actúa en imágenes que aparecen como background sino en las etiquetas IMG). El valor que necesitamos para nuestro caso es el “cover” que cubre la totalidad del contenedor sin distorsionar la imagen. Por último haremos que nuestras imágenes queden centradas tanto vertical como horizontal dentro de su contenedor. Usaremos el position con el valor “absolute” para nuestra imagen y position con el valor de “relative” para el contenedor, luego le diremos que nuestra imagen estará a 50% del lado izquerdo (left) y a 50% del techo (top) del contenedor. También aplicaremos la propiedad transform en las que usaremos las funciones de CSS llamadas translateX() y translateY(). En nuestro caso le daremos a translateX() el valor de -50% y a translateY() el valor de -50%:

album imagenes
Ya con esto quedaría solucionado nuestro tamaño de las imágenes sin distorsionar sus proporciones ni afectar el diseño y vistosidad de nuestro sitio.

Espero les sirva de algo. Se que el tema con respecto a este tipo de cosas es extenso. Trataré de extenderme en el tema con otros post. Agradecería comenten los problemas que se les presenten y trataremos de solucionarlos. Hasta la próxima.

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Deja un comentario

A %d blogueros les gusta esto: