Recipe: Media objects
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
O *Media Object* (Objeto de Mídia) é um padrão que vemos em toda web. Nomeado por Nicole Sullivan refere-se a uma caixa de duas colunas com uma imagem de um lado e texto descritivo do outro, por ex. uma postagem no facebook ou tweet.

![](/pt-BR/docs/Web/CSS/Layout_cookbook/Media_objects/media-object.png)

Exigências
----------

O Padrão Media Object precisa de algumas ou todas as seguintes características:

* Empilhados no Celular, duas colunas no Computador.
* A imagem pode estar à esquerda ou à direita.
* A imagem pode ser pequena ou grande.
* Media Objects (Objetos de Mídia) podem ser aninhados.
* O Media Object deve limpar o conteúdo, não importando o tamanho.
A receita
---------

**Nota:** Download this example

Escolhas feitas
---------------

Eu escolhi usar o Layout de Grade para o Media Object (Objeto de Layout), pois ele permite controlar o layout em duas dimensões quando preciso. Isso significa que, quando temos um rodapé, com conteúdo curto acima, o rodapé pode ser empurrado para a parte inferior do Media Object (Objeto de Layout).

Outro motivo para usar o Layout de Gride é para que eu possa usar `fit-content` (en-US) para o tamanho da faixa de imagem. Usando `fit-content` com um tamanho máximo de 200 pixels, quando temos uma imagem pequena como o ícone, a faixa fica tão grande quanto o tamanho dessa imagem — o tamanho `max-content`. Se a imagem for maior, a faixa para de crescer em 200 pixels e, como a imagem possui `max-width`  de 100% aplicado, ele diminui para que continue a caber dentro da coluna.

Usando `grid-template-areas` (en-US) para alcançar o layout, eu posso ver o padrão no CSS. Eu defino minha grade quando tivermos uma largura máxima de 500 pixels, em dispositivos menores o Media Object empilha.

Uma opção para o padrão é girá-lo para mudar a imagem para o outro lado — isso é feito adicionando a classe `media-flip`, que define um modelo de grade invertida, fazendo com que o layout seja espelhado.

Quando aninhamos um media object (Objeto de Layout) dentro do outro, precisamons colocá-lo na segunda faixa no layout regular, e na primeira faixa quando invertida.

Fallbacks (Alternativas, Plano B)
---------------------------------

Existem várias alternativas possíveis para esse padrão, dependendo dos navegadores que você deseja oferecer suporte. Um bom exemplo seria flutuar a imagem para a esquerda e adicionar uma correção clara à caixa para garantir que ela contivesse as flutuações.

**Nota:** Baixe este exemplo

Depois que os elementos flutuantes se tornam itens da grade, o flutuador não se aplica mais; portanto, você não precisa fazer nada de especial para limpá-lo.

O que você precisará fazer é remover as margens aplicadas ao item e as larguras que não precisamos em um contexto de grade (nós temos o `gap` propriedade para controlá-lo em grades, e a faixa assume o controle do dimensionamento).

Recursos relevantes no MDN
--------------------------

* Layout Grade CSS
* Aprimoramento progressivo e Layout de Grid (en-US)
* Usando áreas de modelo de Grade (en-US)
* Conteúdo Adequado (en-US)
* Áreas de Modelo de Grade (en-US)
Compatibilidade com navegadores
-------------------------------

Os vários métodos de layout tem suporte diferente para os navegadores. Veja os gráficos abaixo para obter detalhes sobre o suporte básico para as propriedades usadas.

#### Áreas de Modelo de Grade

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

#### Flutuador

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.