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 ejecutar un reinicio de emergencia en Windows 8 [Quicktip]

Cerrar tu Windows rápidamente es casi imposible. A veces tiene que esperar el tiempo de espera, otras veces se le pide que guarde este archivo y cierre ese documento, y lo peor de todo es cuando tiene que sentarse entre las toneladas de actualizaciones de Windows otorgadas a su máquina. Para algunos de nosotros, cuando tenemos que irnos, tenemos que irnos.P

(Consejos de tecnología y diseño)

20 PSD de folletos gratis que puedes descargar

Hace un tiempo mostramos dos increíbles colecciones de diseños de folletos para su inspiración, que se recibió popularmente IMAGE: los lectores. Por lo tanto, hoy decidimos compartir con ustedes folletos PSD gratuitos que puede personalizar y usar.Un folleto bien diseñado puede ser una gran herramienta de marketing y ayudar a su marca a ser notada . Dis

(Consejos de tecnología y diseño)