شاشة تكيفية لصورة HTML 5 img رمز تحجيم نسبي لصفحة الويب HTML XNUMX

بسبب ازدهار الإنترنت عبر الهاتف المحمول ،WeChat التسويقأصبحت شعبية الهواتف المحمولة生活أداة لا غنى عنها.

بناء محطةنموذج ، فمن المستحسن استخدامWordPressسمة تكيفية لـ:

ماذا تعني صورة CSS التكيفية؟

يشير التكيف الذاتي لصور CSS إلى إنشاء الصور في صفحة ويب html ، من خلال كود CSS:

التالى،تشن ويليانجسوف أشاطركم CSS img رمز التحجيم النسبي ^ _ ^

ارتفاع صورة CSS وعرضها رمز التكيف

أدخل الصورة في html:

إذا كنت تريد أن تتكيف الصورة مع حجم الشاشة الصغير بدلاً من أن تظل ثابتة في العرض والارتفاع.

يمكنك إضافة الكود التالي إلى ملف style.css لموضوع WordPress الخاص بك ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

بيان هناmax-widthقاعدة العرض الأقصى

• لضمان عرض جميع الصور بحد أقصى 100٪ (أي لا يمكن عرضها إلا بحجم الصور الخاصة بها).
• في هذه المرحلة ، إذا كان العنصر الذي يحتوي على الصورة (على سبيل المثال ، الجسم أو عنصر div الذي يحتوي على الصورة) أصغر من عرض الصورة المتأصل ، فسيتم تغيير حجم الصورة لملء أقصى مساحة متاحة.

width:auto;يعني العرض التلقائي

\9 إنها طريقة لكتابة hack css.

• بهذه الطريقة ، يضاف "\ 9" إلى كود css العادي ، فقط متصفح IE يمكنه التعرف عليه ، وستتجاهل المتصفحات الأخرى هذا البيان.
• سيؤدي ذلك إلى تحقيق تمايز المستعرض ، مما يتيح الغرض من المتصفحات المتوافقة.

لماذا لا تستخدم العرض: 100٪؟

لتحقيق القياس التلقائي للصور ، يمكنك أيضًا استخدام خصائص العرض الأكثر استخدامًا ، على سبيل المثالwidth：100％.

ومع ذلك ، لا تنطبق هذه القاعدة هنا.

• لأن هذه القاعدة ستجعلها تظهر بعرض الحاوية الخاصة بها.
• في الحالات التي تكون فيها الحاوية أوسع بكثير من الصورة ، سيتم شد الصورة دون داع.

注意 事项

ما هي محددات CSS؟ ما هو الفرق بين class و id؟تتحدث الدروس التالية عن ▼

🔗ما هو الفرق بين CSS selector class و id؟ استخدام المعرف والفئة في HTML

كيف يقوم موقع الجوال بتشغيل فيديو MP4 المتكيف مع الصفحة؟الرجاء الضغط على الرابط أدناه ▼

🔗كيف يمكن تكييف صفحة الويب H5 MP4 مع الصفحة؟ كود HTML لتشغيل مقاطع الفيديو على مواقع الويب المحمولة