Imágenes responsivas en Bootstrap con ejemplos

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 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.

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

  • Clase .img-responsive : las imágenes receptivas en Bootstrap se crean agregando la clase .img-responsive a la etiqueta img . Se aplica una clase sensible a img: max-width: 100% | altura:automático | display:block en la imagen. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Responsive Image </h1>
        <br>
        <h3>.img-responsive class</h3>
         
<p>
            Change the size of the browser window
            to see effect
        </p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-responsive" alt="Responsive image"
            width="307" height="240"/>
    </div>
</body>
</html>

Producción:

image responsive class

  • Clase .img-fluid : agregue la clase .img-fluid a la etiqueta. Se aplica la clase .img-fluid : max-width: 100% | altura: automático sobre la imagen. 

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-fluid class</h3>
         
<p>
            Change the size of the browser window
            to see effect.
        </p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-fluid" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

Producción:

image fluid class

  • Clase .img-rounded : Las esquinas redondeadas a una imagen son agregadas por el . clase redondeada img . (Las esquinas redondeadas no son compatibles con IE8).

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-rounded class</h3>
         
<p>Rounded Corners</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-rounded" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

Producción:

image rounded class

  • Clase .img-circle : la clase .img-circle convierte la forma de la imagen en un círculo . (Las esquinas redondeadas no son compatibles con IE8).

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-circle class </h3>
         
<p>Circle</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-circle" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

Producción:

image circle class

  • Clase .img-thumbnail : la clase .img-thumbnail realiza la configuración de la imagen en miniatura .

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-thumbnail class</h3>
         
<p>Thumbnail</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-thumbnail" alt="Responsive Image"
            width="307" height="240">
    </div>
</body>
</html>

Producción:

image thumbnail class

Navegador compatible:

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

Publicación traducida automáticamente

Artículo escrito por MeghaKakkar 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 *