---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: ''
localeTitle: Faça uma imagem responsiva
---
## Description
Fazer imagens responsivas com CSS é realmente muito simples. Em vez de aplicar uma largura absoluta a um elemento: img { width: 720px; }
Você pode usar: img {
max-width: 100%;
display: bloco;
altura: auto;
}
A propriedade max-width
de 100% dimensiona a imagem para se ajustar à largura do contêiner, mas a imagem não se estende mais do que a largura original. Definir a propriedade de display
para bloquear altera a imagem de um elemento in-line (seu padrão) para um elemento de bloco em sua própria linha. A propriedade height
do auto mantém a proporção original da imagem.
## Instructions
Adicione regras de estilo para a tag img
para torná-lo responsivo ao tamanho de seu contêiner. Ele deve exibir como um elemento de nível de bloco, ele deve caber toda a largura de seu contêiner sem esticar e deve manter sua proporção original.
## Tests
```yml
tests:
- text: Sua tag img
deve ter uma max-width
definida como 100%.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img
tag should have a max-width
set to 100%.");'
- text: Sua tag img
deve ter um conjunto de display
para bloquear.
testString: 'assert($("img").css("display") == "block", "Your img
tag should have a display
set to block.");'
- text: Sua tag img
deve ter uma height
definida como automática.
testString: 'assert(code.match(/height:\s*?auto;/g), "Your img
tag should have a height
set to auto.");'
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```