El clásico elemento para colocar imágenes en HTML, <img>, poco a poco ha sido sustituido por el más moderno y capaz elemento <picture> que permite definir diferentes imágenes y formatos en función del ancho de pantalla y el soporte, y combinarlo con subelementos <srcset> y <sizes> para un control total. Esto no sólo sirve para lo obvio, que es mostrar imágenes a diferentes tamaños y resoluciones, sino que se pueden conseguir cosas más avanzadas, como por ejemplo, hacer que según el tamaño de la pantalla se centre la imagen en determinado detalle, en lugar de que se vean otras partes menos interesantes.
Si tienes interés en aprender a fondo, entendiendo bien los conceptos y no "con alfileres", las técnicas de Responsive Web Design y las tecnologías modernas de maquetación, este es tu curso: Diseño Web Responsive con HTML5, Flexbox, CSS Grid y Bootstrap.
Bien, el caso es que una duda sencilla pero que a más de uno le puede traer de cabeza (lo sé porque me lo preguntan mucho los alumnos) es ¿cómo hago para centrar los contenidos de un elemento <picture> en mi página o aplicación web?
En realidad es sencillo pero la cosa cambia en función de si se gestiona como un elemento de línea o de bloque.
Tanto <img> como <picture> son elementos inline por defecto, así que se pueden centrar bien simplemente usando text-align:center; en su contenedor (ojo, no en ellos, claro).
Ahora bien, si los queremos visualizar como elementos de bloque, algo muy común, la cosa cambia ligeramente.
En el caso de las imágenes <img> llega con otorgarles márgenes automáticos a ambos lados, así (como suele hacerse con cualquier elemento de bloque):
display: block;
margin: 0 auto;
pero en el caso de las etiquetas <figure> no, ya que son elementos contenedores, que son los que realmente contienen a la imagen que finalmente se muestra en función de cómo se haya configurado.
Si abres el navegador y ves cómo es este elemento mostrándolo en las herramientas del desarrollador verás que, por defecto el elemento está colapsado en altura y que dentro contiene a la imagen en cuestión. De hecho, aunque tengamos elementos srcset para determinar de manera automática la mejor imagen en cada caso en función del ancho y de la densidad de pantalla, en el fondo lo que hay es un elemento contenedor (el <picture>) con un elemento dentro que es un <img> que es el que carga la imagen final que se está mostrando.
Por lo tanto para centrarlo cuando fuerces a que sea un elemento de bloque tienes dos opciones:
- Centrar el elemento
<img> que hay dentro del <picture> de la manera habitual indicada arriba.
- Otorgarle un ancho apropiado al elemento
<picture> para que pueda centrarse como cualquier elemento de bloque, que debe tener un ancho para que puedan establecerse márgenes automáticos con él. Lo mejor en este caso es usar width:fit-content; para que se ajuste al ancho de la imagen que tenga dentro de manera automática.
La mejor manera es verlo en la práctica, en este minivideo:
¡Espero que te resulte útil!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
