---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: ''
localeTitle: جعل صورة مستجيبة
---
## Description
جعل الصور متجاوبة مع CSS بسيط للغاية. بدلاً من تطبيق عرض مطلق لعنصر: img { width: 720px; }
يمكنك استخدام: img {
أقصى عرض: 100 ٪.
العرض محجوب؛
الارتفاع: auto؛
}
تحدد الخاصية max-width
٪ 100 الصورة لتناسب عرض الحاوية الخاصة بها ، ولكن الصورة لن تمتد على نطاق أوسع من عرضها الأصلي. يؤدي تعيين خاصية display
لحظر التغييرات على الصورة من عنصر مضمّن (الافتراضي الخاص بها) إلى عنصر كتلة على السطر الخاص بها. تحافظ خاصية height
تلقائي على نسبة العرض إلى الارتفاع الأصلية للصورة.
## Instructions
أضف قواعد النمط لعلامة img
لجعلها تستجيب لحجم الحاوية الخاصة بها. يجب أن يتم عرضه كعنصر على مستوى الكتلة ، يجب أن يلائم العرض الكامل للحاوية دون تمديد ، ويجب أن يحتفظ بنسبة العرض إلى الارتفاع الأصلية.
## Tests
```yml
tests:
- text: يجب أن يكون لعلامة img
الخاصة بك مجموعة max-width
لتصل إلى 100٪.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img
tag should have a max-width
set to 100%.");'
- text: يجب أن يكون لديك علامة img
مجموعة display
للحظر.
testString: 'assert($("img").css("display") == "block", "Your img
tag should have a display
set to block.");'
- text: يجب أن يكون لعلامة img
الخاصة بك مجموعة من height
إلى تلقائي.
testString: 'assert(code.match(/height:\s*?auto;/g), "Your img
tag should have a height
set to auto.");'
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```