En este artículo, veremos cómo agregar imágenes y videos receptivos a archivos HTML usando Materialise CSS y también veremos su implementación a través de los ejemplos.
Materialise es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología. Materialise CSS es un marco front-end popular que ayuda a agregar funciones avanzadas y permite la creación de sitios web receptivos simplemente importando las diversas clases del paquete Materialise CSS. También facilita la adición de imágenes y videos receptivos al sitio web.
Capacidad de respuesta: la capacidad de respuesta es una función en la que el texto, las imágenes, los videos y otros elementos del sitio web se redimensionan automáticamente según el tamaño de la pantalla cuando se visualizan en diferentes anchos de dispositivo. Comprenderemos la adición del comportamiento receptivo a las imágenes en nuestro sitio web, a través de los ejemplos.
Agregar imágenes receptivas al sitio web: podemos agregar imágenes receptivas a nuestro sitio web usando la clase «responsive-img». Esta clase hará que la imagen responda. Por defecto tendrá “ancho = 100% y alto = automático”.
Sintaxis:
<img class="responsive-img" src="url">
Ejemplo: Este ejemplo ilustra la adición de una imagen receptiva usando las propiedades CSS de Materialise.
HTML
<!DOCTYPE html> <html> <head> <title>Materialize CSS</title> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body> <h4>Responsive Image in materialize</h4> <div style="border: 2px solid black; display: flex;"> <img class="responsive-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/20211124113412/gfg.png"> <p> This is a sample image which has been given the class "responsive-img" to make it responsive in nature. </p> </div> </body> </html>
Producción:
Imagen receptiva usando Materialise CSS
Agregar videos receptivos al sitio web: podemos agregar videos receptivos a nuestro sitio web usando la clase » responsive-video » que hará que el video sea receptivo.
Sintaxis:
<video class="responsive-video" controls>
<source src="..." type="....">
</video>
Aquí, agregaremos un enlace de video de YouTube, por lo que estamos usando una etiqueta <div> con una clase » contenedor de video «. Si está agregando un video ya descargado a su computadora, puede usar la etiqueta <video> para este caso.
<div class="video-container responsive-video">
<iframe width="853" height="480" src=
"https://www.youtube.com/embed/gaNp9i6rQHc?rel=0"
frameborder="0" allowfullscreen>
</iframe>
</div>
Ejemplo: Este ejemplo ilustra la adición de video receptivo utilizando la clase de contenedor de video en Materialise CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body> <h4>Responsive Video in materialize</h4> <div class="video-container responsive-video"> <iframe width="850" height="400" src= "https://www.youtube.com/embed/gaNp9i6rQHc?rel=0%22" frameborder="0" allowfullscreen> </iframe> </div> </body> </html>
Producción:
Video responsivo usando Materialise CSS
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA