Materialise CSS proporciona varias clases para que los medios respondan.
Imágenes: las imágenes se pueden diseñar de las siguientes maneras:
Imágenes receptivas: para que las imágenes respondan al ancho de la página, se agrega la clase responsive-img con la etiqueta de imagen.
<img class="responsive-img" src="image.jpg">
Imágenes circulares: para que la imagen se vea circular, se agrega la clase de círculo con la etiqueta de imagen.
<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<img src="image.jpg"
class="circle responsive-img">
</div>
<div class="col s10">
<span class="black-text">
This is a square image, "circle"
class is added to it to make it
appear circular.
</span>
</div>
</div>
</div>
</div>
Ejemplo:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div> <h3>Responsive Image</h3> <img class="responsive-img" src="geeksforgeeks-6.png"> </div> <div class="col s12 m8 offset-m2 l6 offset-l3"> <h3>Circular Image</h3> <div class="card-panel grey lighten-5 z-depth-1"> <div class="row valign-wrapper"> <div class="col s2"> <img src="download.jpg" class="circle responsive-img"> <!-- notice the "circle" class --> </div> <div class="col s10"> <span class="black-text"> This is a square image, "circle" class is added to it to make it appear circular. </span> </div> </div> </div> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Materialise CSS proporciona un contenedor para videos incrustados que cambian de tamaño de manera receptiva.
Incrustaciones receptivas: para hacer que las incrustaciones respondan, simplemente envuélvalas dentro de div que tiene el contenedor de video de clase.
<div class="video-container">
<iframe width="853" height="480"
src="//www.youtube.com"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Videos receptivos: para hacer que los videos HTML5 respondan, simplemente agregue la clase responsive-video a la etiqueta de video.
<video class="responsive-video" controls>
<source src="video.mp4" type="video/mp4">
</video>
Ejemplo:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div> <h3>Responsive Embeds</h3> <div class="video-container"> <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen> </iframe> </div> </div> <div class="card-panel"> <h3>responsive Videos</h3> <video class="responsive-video" controls> <source src= "WhatsApp Video 2020-06-02 at 13.23.30.mp4" type="video/mp4"> </video> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA