freeCodeCamp

2.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b0a	Use a Retina Image for Higher Resolution Displays	0		استخدم صورة شبكية العين لعرض أعلى دقة

Description

إن أبسط طريقة لجعل صورك تظهر "شبكية العين" (وتحسينها لشاشات عرض الشبكية) هي تحديد قيم width height بها كنصف ما هو الملف الأصلي فقط. في ما يلي مثال على صورة تستخدم فقط نصف الطول والعرض الأصليين:

<نمط>
img {height: 250px؛ العرض: 250 بكسل ؛ }
</ النمط>
<img src = "coolPic500x500" alt = "صورة ممتازة للغاية">

Instructions

اضبط width height علامة img على نصف قيمها الأصلية. في هذه الحالة ، height كل من height الأصلي width الأصلي 200 بكسل.

Tests

tests:
  - text: يجب أن يكون <code>width</code> العلامة <code>img</code> 100 بكسل.
    testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
  - text: يجب أن <code>height</code> العلامة <code>img</code> 100 بكسل.
    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

2.0 KiB Raw Blame History