freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0		جعل صورة مستجيبة

Description

جعل الصور متجاوبة مع CSS بسيط للغاية. بدلاً من تطبيق عرض مطلق لعنصر: img { width: 720px; } يمكنك استخدام:

img {
أقصى عرض: 100 ٪.
العرض محجوب؛
الارتفاع: auto؛
}

تحدد الخاصية max-width ٪ 100 الصورة لتناسب عرض الحاوية الخاصة بها ، ولكن الصورة لن تمتد على نطاق أوسع من عرضها الأصلي. يؤدي تعيين خاصية display لحظر التغييرات على الصورة من عنصر مضمّن (الافتراضي الخاص بها) إلى عنصر كتلة على السطر الخاص بها. تحافظ خاصية height تلقائي على نسبة العرض إلى الارتفاع الأصلية للصورة.

Instructions

أضف قواعد النمط لعلامة img لجعلها تستجيب لحجم الحاوية الخاصة بها. يجب أن يتم عرضه كعنصر على مستوى الكتلة ، يجب أن يلائم العرض الكامل للحاوية دون تمديد ، ويجب أن يحتفظ بنسبة العرض إلى الارتفاع الأصلية.

Tests

tests:
  - text: يجب أن يكون لعلامة <code>img</code> الخاصة بك مجموعة <code>max-width</code> لتصل إلى 100٪.
    testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
  - text: يجب أن يكون لديك علامة <code>img</code> مجموعة <code>display</code> للحظر.
    testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
  - text: يجب أن يكون لعلامة <code>img</code> الخاصة بك مجموعة من <code>height</code> إلى تلقائي.
    testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Solution

// solution required

2.7 KiB Raw Blame History