2.5 KiB
2.5 KiB
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 properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" 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
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