Ajustar Imagem no Contêiner

Introdução

Neste laboratório, aprenderemos como usar CSS para ajustar e posicionar imagens dentro de seus contêineres, preservando sua proporção. Exploraremos as propriedades object-fit e object-position e como elas podem ser usadas para obter diferentes resultados. Ao final deste laboratório, você será capaz de criar imagens visualmente atraentes que se encaixam perfeitamente em seu espaço designado.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

index.html e style.css já foram fornecidos na VM.

Para ajustar uma imagem dentro de seu contêiner, preservando sua proporção, você pode usar object-fit: contain. Para preencher o contêiner com a imagem, preservando sua proporção, use object-fit: cover. Se você deseja posicionar a imagem no centro do contêiner, pode usar object-position: center.

Aqui está um exemplo de como você pode usar essas propriedades:

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

E o CSS correspondente:

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

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Ajustar Imagem no Contêiner. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.