Arranque 4 | Imágenes

Posted on by Rudeus Greyrat

Bootstrap ofrece diferentes clases de imágenes para mejorar su apariencia y también para que respondan. 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 su elemento principal y crecerá y se reducirá de acuerdo con el cambio en el tamaño de su elemento principal sin perder su relación de aspecto.

Las diferentes clases disponibles en Bootstrap para imágenes se explican a continuación:

Imágenes receptivas: la clase .img-fluid se usa dentro de la etiqueta <img> para crear la imagen receptiva. La imagen receptiva se utiliza para ajustar la imagen automáticamente al cuadro especificado. 

Sintaxis:

<img src="image_source" class="img-fluid" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Responsive Image</h2>
        <img class="img-fluid" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="667" height="440"/>
    </div>
</body>
</html>

Producción:

Imagen de esquinas redondeadas: la clase .rounded se utiliza para crear una imagen de esquinas redondeadas. Esta clase se usa con la etiqueta <img>.

Sintaxis:

<img src="image_source" class="rounded" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Rounded Corner Image</h2>
        <img class="rounded" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="367" height="340"/>
    </div>
</body>
</html>

Producción:

Imagen de círculo: la clase .rounded-circle se usa para crear la imagen de forma de círculo. 

Sintaxis:

<img src="image_source" class="rounded-circle" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Circle Image</h2>
        <img class="rounded-circle" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="467" height="340"/>
    </div>
</body>
</html>

Producción:

Imagen en miniatura: la clase .img-thumbnail se utiliza para crear una imagen en miniatura (con bordes). 

Sintaxis:

<img src="image_source" class="img-thumbnail" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Thumbnail Image</h2>
        <img class="img-thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="467" height="340"/>
    </div>
</body>
</html>

Producción:

Alineación de la imagen: la clase .float-left y .float-right se usa para establecer la alineación izquierda y derecha de la imagen.

Sintaxis:

<img src="image_source" class="float-left/float-right" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Aligning Image</h2>
        <!-- Bootstrap float-left class -->
        <img class="float-left" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="250" height="250"/>
        <!-- Bootstrap float-right class -->
        <img class="float-right" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="250" height="250"/>
    </div>
</body>
</html>

Producción:

Imagen centrada: las clases .mx-auto (margin:auto) y .d-block (display:block) se utilizan para colocar la imagen en el centro.

Sintaxis:

<img src="image_source" class="mx-auto d-block" ...>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">Centered Image</h2>
        <img class="mx-auto d-block" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            alt="Responsive image" width="350" height="250"/>
    </div>
</body>
</html>

Producción:


Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *