1.9 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
587d78b1367417b2b2512b09 | Tornar uma imagem responsiva | 0 | 301140 | make-an-image-responsive |
--description--
Tornar imagens responsivas com CSS é muito simples. Você só precisa adicionar essas propriedades a uma imagem:
img {
max-width: 100%;
height: auto;
}
A propriedade max-width
de valor 100%
garantirá que a imagem nunca seja mais larga do que o contêiner em que está inserida. A propriedade height
de valor auto
, por sua vez, fará com que a imagem mantenha sua proporção original.
--instructions--
Adicione as regras de estilo à classe responsive-img
para torná-la responsiva. A imagem não pode ser mais larga do que seu contêiner (neste caso, é a janela de visualização). A proporção original deve ser mantida. Depois de adicionar seu código, redimensione a visualização para ver como suas imagens se comportam.
--hints--
O elemento de classe responsive-img
deve ter a propriedade max-width
com o valor de 100%
.
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
O elemento de classe responsive-img
deve ter a propriedade height
com o valor de auto
.
assert(code.match(/height:\s*?auto;/g));
--seed--
--seed-contents--
<style>
.responsive-img {
}
img {
width: 600px;
}
</style>
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
--solutions--
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
img {
width: 600px;
}
</style>
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">