freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.chinese.md at 3b8e257643a7b51e0f86d682c78d6888dd3d35a0

Files

Kristofer Koishigawa b3213fc892 fix(i18n): chinese test suite (#38220 )

* fix: Chinese test suite

Add localeTiltes, descriptions, and adjust test text and testStrings to get the automated test suite working.

* fix: ran script, updated testStrings and solutions

2020-03-03 18:49:47 +05:30

2.1 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	0	https://scrimba.com/c/cPp7VfD	1	针对高分辨率屏幕应使用视网膜图片

Description

随着联网设备的增加，设备的尺寸和规格有所不同，它们使用的显示器在内部和外部可能也不同。像素密度（PPI 或 DPI）就是设备之间的其中一个不同点。最著名的显示器就是最新的 Apple MacBook Pro 笔记本电脑和最近的 iMac 电脑上的“视网膜显示器”。由于“视网膜”和“非视网膜”显示器之间的像素密度不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。

使图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示器”）上正常显示的最简单方法是将其 width 和 height 值设置为原始文件的一半，如下所示：

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

Instructions

设置 img 标签的 width 和 height 为它们原始宽高的一半。在这个例子中，原始 height 和原始 width 的值都为 200px。

Tests

tests:
  - text: '<code>img</code> 标签的 <code>width</code> 值应为 100px。'
    testString: assert($('img').css('width') == '100px');
  - text: '<code>img</code> 标签的 <code>height</code> 值应为 100px。'
    testString: assert($('img').css('height') == '100px');

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

2.1 KiB Raw Blame History Unescape Escape