Cómo usar HTML5 Elemento para lograr una imagen receptiva

El diseño receptivo puede estar aquí para quedarse, pero hay muchos problemas que deben abordarse cuando se trata de hacer que las imágenes sean receptivas . Aunque las imágenes con capacidad de respuesta se redimensionan automáticamente según el tamaño de la ventana gráfica (lo que es técnicamente sencillo), un problema al que se enfrentan los usuarios es que el punto vocal de la imagen apenas será visible cuando la imagen sea demasiado pequeña .

El consenso ideal entre los desarrolladores web es que la dimensión real también debería ser receptiva . El navegador debería poder cargar imágenes más pequeñas o más grandes de acuerdo con el tamaño de la ventana gráfica. De esta forma, podemos dirigir y entregar la mejor proporción de imagen en lugar de la imagen encogida (como se muestra).

Aquí es donde entra el elemento de picture HTML5. La picture nos permite proporcionar múltiples fuentes de imágenes y controlar la entrega a través de consultas de medios. Aunque todavía no hay ningún navegador que implemente este elemento, podemos usar un relleno llamado Picturefill para hacer esto. Veamos cómo se hace, ¿de acuerdo?

Empezando

Picturefill es una biblioteca de JavaScript desarrollada por Filament Group. Nos permite usar el elemento de picture ahora. Para comenzar, descargue el script en el repositorio de Github y coloque el picturefill.js o picturefill.min.js . Picurefill es una biblioteca de JavaScript independiente que no requiere ninguna otra biblioteca para funcionar. Simplemente puede agregarlo en la etiqueta de la head .

La imagen

He preparado una imagen en tres dimensiones diferentes, de la siguiente manera. La imagen ha sido recortada para conservar el foco en la persona en la imagen. El plan aquí es que mostraremos el tamaño más pequeño en pantallas pequeñas y la imagen más grande en pantallas grandes.

Usar elemento de imagen

Picturefill puede funcionar de dos maneras: podemos insertar srcset en la etiqueta img o usar el elemento de picture . Aquí optaremos por el elemento de picture ya que es más manejable, más fácil de entender y más legible.

De forma similar a audio elementos de video y audio, la picture envuelve varios elementos source que apuntan a la fuente de la imagen, de la siguiente manera.

El elemento de source, como puede ver en el fragmento de código anterior, se configura con el atributo de media . En este atributo especificamos el punto de corte de la ventana en la que se debe presentar la imagen. Puedes ver el efecto de inmediato.

Echa un vistazo a la página de demostración y cambia el tamaño del tamaño de la ventana gráfica, debes encontrar la imagen que se muestra dentro del ancho de la ventana gráfica especificada.

Picturefill para WordPress

Si está usando WordPress, puede usar un complemento llamado Picturefill.WP que le permite implementar el elemento de imagen en WordPress, sin la molestia. Simplemente cargue e incruste su imagen como de costumbre, y este complemento se encargará del resto.

Pensamiento final

El elemento de picture es una gran adición en HTML5. Tenemos más control sobre el tamaño y la dimensión de la imagen que debe presentar el navegador. Y con picturefill podemos usar este nuevo elemento ahora mismo aunque ningún navegador lo haya implementado todavía. Picturefill funciona en una amplia gama de navegadores incluidos en IE (aunque con algunas advertencias).

Por último, vea la demostración y descargue el código fuente a continuación.

• Manifestación
• Descargar Fuente

Cómo el mundo digital alimenta la economía física [infografía]

Probablemente sepa que es importante para una empresa tener algún tipo de presencia en la Web, ya sea una página de contacto, una página de aterrizaje para un producto, una página de comercio electrónico para recibir pedidos o una página de redes sociales para interactuar con los clientes.Lo que quizás no sepa es que las transacciones en el mundo digital representan más que las contribuciones totales del PIB de Canadá y España . ¡Y los n

(Consejos de tecnología y diseño)

Iniciar sesión sin contraseña para todas las cuentas de Microsoft usando su teléfono

Parece que el futuro de los inicios de sesión sin contraseñas está finalmente sobre nosotros, ya que Microsoft ha implementado dicha función en todos sus servicios. A partir de este punto, aquellos que confían en el lote de servicios de Microsoft (Outlook, Skype, etc.) tendrán la opción de iniciar sesión con su teléfono.Así es c

(Consejos de tecnología y diseño)