Ajustar una imagen dentro de un contenedor

Introducción

En este laboratorio, aprenderemos a usar CSS para ajustar y posicionar imágenes dentro de sus contenedores mientras se conserva su relación de aspecto. Exploraremos las propiedades object-fit y object-position y cómo se pueden utilizar para obtener diferentes resultados. Al final de este laboratorio, serás capaz de crear imágenes visualmente atractivas que se ajusten perfectamente dentro de su espacio designado.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} css/colors -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} css/borders -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} css/width_and_height -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} css/positioning -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} css/backgrounds -.-> lab-35197{{"Ajustar una imagen dentro de un contenedor"}} end

Ajustar una imagen dentro de un contenedor

index.html y style.css ya se han proporcionado en la máquina virtual.

Para ajustar una imagen dentro de su contenedor mientras se conserva su relación de aspecto, puedes usar object-fit: contain. Para llenar el contenedor con la imagen mientras se conserva su relación de aspecto, utiliza object-fit: cover. Si quieres posicionar la imagen en el centro del contenedor, puedes usar object-position: center.

Aquí hay un ejemplo de cómo puedes usar estas propiedades:

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

Y el CSS correspondiente:

.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio Ajustar una imagen dentro de un contenedor. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.