2.7 KiB
2.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b1367417b2b2512b09 | Make an Image Responsive | 0 | جعل صورة مستجيبة |
Description
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