freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0		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

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

2.2 KiB Raw Blame History