Imagenes

Documentación y ejemplos para convertir imágenes en comportamiento receptivo (para que nunca sean más grandes que sus elementos principales) y agregarles estilos ligeros, todo a través de clases.

Imágenes receptivas

Las imágenes en Bootstrap responden con .img-fluid . max-width: 100%; y height: auto; se aplican a la imagen para que se adapte al elemento principal.

<img src="..." class="img-fluid" alt="Responsive image">

Miniaturas de imágenes

Además de nuestras utilidades de radio de borde , puede utilizar .img-thumbnail para dar a una imagen una apariencia de borde redondeado de 1 px.

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

Alinear imágenes

Alinee las imágenes con las clases flotantes auxiliares o las clases de alineación de texto . block Las imágenes de nivel se pueden centrar usando la .mx-auto clase de utilidad margin .

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

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Imagen

Si está utilizando el <picture> elemento para especificar varios <source> elementos para un específico <img> , asegúrese de agregar las .img-* clases <img> a la <picture> etiqueta y no a la etiqueta.

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Imagen Banner Responsive

Cuando se necesite un banner responsivo, se deberá usar la etiqueta <picture> seguida de las imagenes alternas en la etiqueta <source> además de la etiqueta <img> la cual deberá contar con la clase .banner-img-fluid

​<picture>
  <source srcset="..." media="...">
  <img src="..." class="img-fluid h-100 banner-img-fluid" alt="...">
</picture>

Clases de opacidad

Utilice las clases de opacidad para ajustar la transparencia de una imagen. Las clases disponibles son:

• .opacity-100 - Opacidad al 100%
• .opacity-80 - Opacidad al 80%
• .opacity-60 - Opacidad al 60%
• .opacity-40 - Opacidad al 40%
• .opacity-20 - Opacidad al 20%

<img src="..." alt="..." class="opacity-100">
<img src="..." alt="..." class="opacity-80">
<img src="..." alt="..." class="opacity-60">
<img src="..." alt="..." class="opacity-40">
<img src="..." alt="..." class="opacity-20">

Efecto de escala central

La clase .scale-up-center proporciona un efecto de aumento de escala suave desde el centro de la imagen. Es útil para crear efectos de hover interactivos.

Aplicar/Quitar efecto

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

<script>
function toggleScaleEffect() {
  const image = document.querySelector('img');
  image.classList.toggle('scale-up-center');
}
</script>

Para aplicar este efecto, puede usar JavaScript para agregar o quitar la clase scale-up-center en respuesta a eventos como hover o clic. En el ejemplo anterior, se utiliza un botón para alternar el efecto.