W3.CSS ofrece una sola clase para administrar imágenes y hacerlas receptivas. Hacer que una imagen responda significa que debe escalar de acuerdo con su elemento principal. Es decir, el tamaño de la imagen no debe desbordar a su padre y crecerá y se reducirá de acuerdo con el cambio en el tamaño de su padre sin perder su relación de aspecto y w3-image hace lo mismo.
Ejemplo: agregar una imagen receptiva a la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a responsive image at the center of the page --> <div class="w3-container w3-center"> <img class="w3-image" src="gfg.png"> </div> </body> </html>
Producción:
Aunque solo tiene clase, se puede incorporar con otras clases para hacer varios efectos como imagen con bordes redondeados, imagen con bordes, imagen como una tarjeta, etc. Para agregar una imagen con bordes redondeados puede usar w3-round o cualquier otro similar clase.
Ejemplo: agregar una imagen con bordes redondeados en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a round-edged responsive image at the center of the page --> <div class="w3-container w3-center"> <img class="w3-image w3-round-large" src="gfg.png"> </div> </body> </html>
Producción:
También puede agregar una imagen circular usando la clase w3-circle a la imagen.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a circular responsive image at the center of the page --> <div class="w3-container w3-center"> <img class="w3-image w3-circle" src="gfg.png"> </div> </body> </html>
Producción:
Para agregar una imagen bordeada podemos usar la clase w3-border. Este efecto también le da un aspecto de miniatura a la imagen.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Adding a bordered responsive image at the center of the page --> <div class="w3-container w3-center"> <img class="w3-image w3-border w3-padding" src="gfg.png"> </div> </body> </html>
Producción:
También puede usar imágenes como tarjetas usando una clase de tarjeta w3 en las imágenes.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG</h2> </div> <!-- Adding a card like responsive image at the center of the page --> <div class="w3-container w3-center"> <img class="w3-image w3-card-4" src="gfg.png"> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA