fbpx

Album de Imagenes

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.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Roly Poly mecedora vasos de Whisky, juego de 6

  • Descripción
  • Aplicaciones
  • Reviews

A Tumbler Specially Designed For Your Favorite Spirits.DINCR has designed this old fashioned game of thrones glass for all those people who know how to enjoy their whiskey, liquor and cocktails people like you.This old fashioned glass is perfect for alcoholic drinks, however, this does not mean that you can enjoy juices or other drinks in it. The glasses in this set will not only look great in your hands and in the hands of your guest, but they will also look great in your collection. So if you want to impress your friends and family, then these high quality whiskey glasses are exactly what you need. Give The Game Of Thrones Whiskey Glass To A Friend As A Present.Are you looking for a present for a friend. Whether they are a man or a woman, they will undoubtedly love the handmade game of thrones old fashioned whiskey glasses. The heavy base tumbler set is such an elegant and practical present, and its quality and worth are evident. Plus, nobody else would think to give your friend a set of beautiful old fashioned glasses. Your present will stand out . You Wont Regret This Purchase.And why would you.The game of thrones old fashioned whiskey glasses are made with the best quality glass. In addition, the glass made with zero chemicals, so you and your loved ones will be safe.

  • STURDY GLASSES : Dishwasher safe and resistant to breakage, chipping and scratching. This whiskey glass is finely made and thick enough not to be a worry in the dishwasher.
  • A LANNISTER ALWAYS PAYS HIS DEBTS : Perfect for Game Of Thrones fans. a friend, family, co-worker, loved one. With this , your loved one will drink a whiskey like a real Lannister and feel the ROAR
  • NEVER FADE OR COME OFF : "That's What I Do, I rink and I Know Things" will never fade or come off in the dishwasher, keep these whiskey glass for life.
  • GREAT SIZE : Our Game Of Thrones Whiskey Glass has a great size it fits perfectly in your hand.
  • LOVE THEM OR YOUR FULL REFUNT : We know you have options here for game of thrones whiskey glasses and we want to make the best choice the easiest one.This will be a contently merchandise for you.Thats why we offer a If for any reason our product doesnt meet your expectations, ship it back to us for a replacement or a full refund.
  • Arrived in plenty of time for Christmas. Got this gift for my boy friend, and i KNOW he’s gonna LOVE it. He’s been really into whiskey and we love Game of Thrones so this i thought was a perfect gift. I love how it was made, it’s beautiful and just what i was hoping it’d be. Can’t wait to surprise him with this. Thank you!
  • I love the shape and weight of the glass and have enjoyed them very much, also the stones are a nice touch

¡Ordenalo aqui!

$17.40 el set

¡Ordena ahora!

Comparte este producto...

Share on facebook
Share on google
Share on twitter
Share on telegram
Share on whatsapp
A %d blogueros les gusta esto: