freeCodeCamp

1.8 KiB

Raw Blame History

id	title	challengeType	videoUrl
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	0	https://scrimba.com/p/pzrPu4/cVZ4Rfp

Description

The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their width and height values as only half of what the original file is. Here is an example of an image that is only using half of the original height and width:

<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

Instructions

Set the width and height of the img tag to half of their original values. In this case, both the original height and the original width are 200px.

Tests

tests:
  - text: Your <code>img</code> tag should have a <code>width</code> of 100 pixels.
    testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
  - text: Your <code>img</code> tag should have a <code>height</code> of 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.8 KiB Raw Blame History