freeCodeCamp

1.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	0		Use uma imagem de retina para exibições de maior resolução

Description

A maneira mais simples de fazer com que suas imagens apareçam "retina" (e otimizá-las para exibições de retina) é definir seus valores de width e height como apenas metade do que o arquivo original é. Aqui está um exemplo de uma imagem que usa apenas metade da altura e largura originais:

<style>
img {altura: 250px; largura: 250px; }
</ style>
<img src = "coolPic500x500" alt = "Uma imagem excelente">

Instructions

Defina a width e a height da tag img para metade de seus valores originais. Nesse caso, a height original e a width original são de 200 px.

Tests

tests:
  - text: Sua tag <code>img</code> deve ter uma <code>width</code> de 100 pixels.
    testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
  - text: Sua tag <code>img</code> deve ter uma <code>height</code> de 100 pixels.
    testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">

Solution

// solution required

1.9 KiB Raw Blame History