Imagenes

Bootstrap 5 imagenes

Documentación y ejemplos para optar por que las imágenes tengan un comportamiento responsivo (para que nunca sean más anchas que sus parent) y agregarles estilos livianos, todo a través de clases.

Responsive images

Las imagenes responsive con .img-fluid.

Mostrar Codigo Editar en Liveweave

HTML

                      <!-- Ejemplo 1 -->
  <img 
    src="../../contacta@1.0/dist/img/background/bg-1.png" 
    class="img-fluid" 
    alt="Logo Contacta" 
  />

Thumbnails

Una de las utilidades de radio de borde, puede usar .img-thumbnail para darle una apariencia de borde redondeado de 1px

Mostrar Codigo Editar en Liveweave

HTML

                      <!-- Ejemplo 1 -->
  <img 
    src="../../contacta@1.0/dist/img/background/bg-1.png" 
    class="img-thumbnail" 
    alt="Logo Contacta Bordeado"
  />

Shadows

Al utilizar el codigo de las sombras, se puede agregar una sombra a la imagen. En el siguiente ejemplo, agregamos la clase

Mostrar Codigo Editar en Liveweave

HTML

                       <!-- Ejemplo 1 -->
  <img 
    src="../contacta@1.0/dist/img/background/bg-5.jpg" 
    class="img-fluid shadow-5-img" 
    alt="Logo Contacta con Shadows"
  />

Al agregar la clase .hover-shadow al elemento, puede aplicar un efecto de desplazamiento de sombra.

Mostrar Codigo Editar en Liveweave

HTML

                       <!-- Ejemplo 1 -->
  <img 
    src="../contacta@1.0/dist/img/background/bg-6.jpg" 
    class="img-fluid hover-shadow" 
    alt="Logo Contacta con Shadows"
  />

Shapes

Usando utilidades de bordeado, puedes cambiar la forma de la imagen con clases.

.rounded Townhouses and Skyscrapers

.rounded-circle Townhouses and Skyscrapers

.rounded-pill Townhouses and Skyscrapers

Mostrar Codigo Editar en Liveweave

HTML

                       <!-- Ejemplo 1 -->
  <img 
    src="../../contacta@1.0/dist/img/background/bg-7.jpg" 
    class="img-fluid rounded" 
    alt="Logo Contacta con Shapes"
  />

  <img 
    src="../../contacta@1.0/dist/img/background/bg-7.jpg" 
    class="img-fluid rounded-circle" 
    alt="Logo Contacta con Shapes"
  />

  <img 
    src="../../contacta@1.0/dist/img/background/bg-7.jpg" 
    class="img-fluid rounded-pill" 
    alt="Logo Contacta con Shapes"
  />