2.2 KiB
2.2 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b1367417b2b2512b09 | Make an Image Responsive | 0 | Faça uma imagem responsiva |
Description
img { width: 720px; }
Você pode usar: img {A propriedade
max-width: 100%;
display: bloco;
altura: auto;
}
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
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
tests:
- text: Sua tag <code>img</code> deve ter uma <code>max-width</code> definida como 100%.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
- text: Sua tag <code>img</code> deve ter um conjunto de <code>display</code> para bloquear.
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
- text: Sua tag <code>img</code> deve ter uma <code>height</code> definida como automática.
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'
Challenge Seed
<style>
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
Solution
// solution required