Imagens Flexíveis

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 66 de 76.

No web design responsivo, imagens flexíveis ajustam-se automaticamente para caber em diferentes tamanhos de tela, garantindo que fiquem bem em todos os dispositivos. Sem flexibilidade, as imagens podem ficar grandes demais em telas pequenas ou quebrar o layout.

Como Tornar Imagens Flexíveis:

1. Use o max-width do CSS
Definir max-width: 100% garante que as imagens nunca excedam a largura de seu container.

img {
  max-width: 100%;
  height: auto; /* Mantém a proporção */
}

2. Use Unidades de Viewport
Você pode dimensionar imagens usando vw (largura da viewport) para fazê-las escalar com o tamanho da tela.

img {
  width: 50vw; /* A imagem ocupa 50% da largura da viewport */
}

Desafio

Fácil

Você recebeu um documento HTML com uma imagem. Sua tarefa é tornar a imagem responsiva para que ela se ajuste a diferentes tamanhos de tela.

Escreva uma regra CSS que tenha como alvo todos os elementos com a classe img-max. Defina seu max-width como 100% e seu height como auto.
Escreva uma regra CSS que tenha como alvo todos os elementos com a classe img-vw. Defina seu width como 50vw e seu height como auto.

Folha de consulta

Imagens flexíveis se ajustam automaticamente para caber em diferentes tamanhos de tela no web design responsivo.

Usando max-width:

img {
  max-width: 100%;
  height: auto; /* Mantém a proporção */
}

Usando unidades de viewport:

img {
  width: 50vw; /* A imagem ocupa 50% da largura da viewport */
}

Experimente você mesmo

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>