كيفية تغيير الصورة في HTML. الصور وخصائصها في CSS. نموذج التعليمات البرمجية مع تغيير في حجم الصورة v.css

هذا الدرس هو نوع من الاستمرار في السابق، الذي اعتبرنا فيه، حان الوقت لتعميق معرفتك ونرى خصائص CSS. الصور.

أبعاد الصورة في CSS

دعونا معرفة ما هو الجديد هنا هنا، لقد قمت بإنشاء فئة IMG التي يكون فيها حجم الصورة، العرض العرضي، والارتفاعات لدينا ارتفاع، أحجام أقوم بتحديد أكثر الأصلي حتى تتمكن من رؤية الصورة بوضوح.

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

بالنسبة للوضوح، سأقدم مثالا حيث سيكون هناك الكثير من النص، وسترى أن المسافات البادئة من الصورة موجودة في هذا المثال، وسوف نستخدم الصورة دون تحديد المسافات البادئة حتى تتمكن من رؤية الفرق بوضوح.

في المتصفح، نرى ما يلي:

لقد صنعت المسافات البادئة من الصورة في هذا المثال بفضل معلمة الهامش التي طلبت من المسافات البادئة الأمريكية من جميع الحواف الأربعة من 20 بكسل. يمكنك هنا إجراء مزيد من التلاعب الماكرة، يمكنك تعيين مسافة بادئة من حافة معينة، على سبيل المثال:

• هامش أعلى - المسافة البادئة من الأعلى
• الهامش الحق - المسافة البادئة من الجانب الأيمن
• الهامش السفلي - مسحوق الليل
• الهامش اليسار - المسافة البادئة من الجانب الأيسر

وفقا لذلك، يمكنك هنا أن تقوم بإعداد أكثر وأكثر بمهارة، أو اسأل المسافة البادئة من جانب واحد أو اثنين لا تلمس الآخرين.

في المتصفح:

حدد الإطار حول الصورة، بفضل المعلمة الحدودية لبدء التشغيل، قم بتعيين عرض الإطار باستخدام عرض الحدود، ونحن نحددها في بكسل، ثم نمط الإطار، أي نوع من نمط الحدود هنا لديه العديد من القيم لاختيار لك:

والمعلمة الأخيرة التي سنقوم بضبط هذا اللون من الإطار المحدد بواسطة معلمة لون الحدود.

في المتصفح نرى:

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

الخلفية: URL (proba.png) كرر X؛

سيتم تكرار الخلفية فقط على طول المحور X، أي أفقيا في سطر واحد.

خلفية: URL (proba.png) كرر y؛

سيتم تكرار الخلفية فقط على طول المحور Y الذي هو رأسيا في سطر واحد.

خلفية: URL (proba.png) لا تكرار؛

لن تتكرر الخلفية، ولكن ستظهر صورة واحدة فقط.

خلفية الحجم: 500 بكسل 200px؛

هذه هي المعلمة الإضافية التي تحدد حجم الصورة للخلفية والعرض والارتفاع.

شفافية الصورة مع CSS

في المتصفح، نرى ما يلي:

جاءت هذه الخاصية مع ظهور CSS3 وحصلت في الواقع على تطبيق واسع النطاق. يتم تنفيذه باستخدام المعلمة العتامة تعدد شفافية الصورة، والقيم من 0 إلى 1، ومرشح المعلمة الثانية: Alpha (opacity \u003d 50)؛ هل الأكثر ل متصفح الانترنت المستكشف منذ الإصدارات القديمة لا تدعم المعلمة التعتيم والقيم من 0 إلى 100. في المثال، قدمت خصيصا صورتين لمشاهدتها بوضوح الفرق.

في هذا الدرس، تنتهي خصائص العقارات CSS، وآمل أن يكون هذا الدرس مفيدا لك وملهما لدراسة اللغة وتلقي المعرفة الجديدة.

تاريخ النشر: 2014-04-22

تتكون الصور تقريبا أي موقع، لذلك دون تغيير حجمها ليست ضرورية. يمكنك تغيير حجم الصورة بطريقتين: في محرر الجرافيك أو برمجيا ب. رمز HTML على CSS.

إذا في cSS Code. لا يقوم HTML بتعيين حجم الصورة، ثم ارتفاعه وعرضه على الموقع سيكون هو نفسه في بكسل كما مصدر الملف.وبعد هذا هو، يمكنك تغيير حجم الصورة دون CSS و HTML باستخدام، فقط محرر رسومات وسيتم تغييره تلقائيا على الموقع، إذا لم تحدد حجمه. ولكن هناك حالات عندما يكون من الضروري تغيير حجم الصورة برمجيا في CSS على HTML.

1. تغيير الصورة في محرر الرسومات

يمكنك تغيير حجم الصورة في أي محرر رسومات (Photoshop، Gimp، XnView) وسيتم تغييره تلقائيا على الموقع وفقا للأحجام الأصلية.

بالإضافة إلى الطريقة:

يتم تحميل الصورة بشكل أسرع لأنك لا تحتاج إلى تنزيل بيانات إضافية (بكسل)، والتي سيتم ضغطها برمجيا.

minuses:

محرري الرسوم البيانية هي صور مضغوطة بشكل سيء أقل من 200 بكسل في العرض والارتفاع.

دائما عندما يكون ذلك ممكنا ومحاولة تغيير الحجم في محرر الرسومات، بحيث يتم تحميل الصور بشكل أسرع من متى التغيير البرنامجيوبعد الفرق السرعة يمكن أن يكون عشرات المرات.

2. تغيير الصورة في رمز CSS على الموقع

الايجابيات

أسرع وأكثر ملاءمة لتعيين الحجم. هذه الطريقة عادة ما يتم استخدام الصورة عادة للراحة. على سبيل المثال، عندما تكون صورة واحدة قد تحتوي على العديد من الأحجام المختلفة - غالبا ما تكون أكثر ملاءمة لتغيير قيم نفس الشيء ونفسها برمجيا بدلا من تحميل جميع المتغيرات من تنسيقات صورة واحدة تحريرها في المحرر الرسومي.

صور صغيرة، أقل من 200 بكسل في الطول أو العرض، على النقيض من محرري الرسوم، مضغوط جيدا. إذا كنت تريد أن يكون حجم الصورة أقل من 200 بكسل على الموقع، فمن الأفضل أن يكون الحجم الأولي أكثر بنسبة 30-50٪ (260-300 بكسل) للحفظ جودة جيدة مع انخفاض.

في الوقت نفسه، لن يتم الشعور بالفرق في سرعة التنزيل للموقع ر. الصور الصغيرة تحتل مساحة صغيرة جدا ومع زيادة حجمها بنسبة 30٪ لن تلاحظ التغييرات. لكن الفرق ملحوظ.

minuses:

الصور، مضغوط برمجيا، يتم تحميلها مرة أطول ر. K. تغيير الحجم يحدث فقط بعد تنزيل الإصدار الأصلي. لذلك، إذا كان حجم الصورة أكثر من 200 بكسل في العرض أو الارتفاع، فمن الأفضل ضغط في محرر رسومي بحيث يعمل الموقع بشكل أسرع.

كيفية تغيير حجم الصور في HTML باستخدام CSS

لتغيير حجم الصورة في أدوات HTML CSS العرض (العرض) والطول (الارتفاع) داخل سمة النمط. يمكنك كتابة العرض أو الارتفاع فقط، وستتغير القيمة المتبقية غير الفعلية تلقائيا مع الحفاظ على أبعاد الصورة. على سبيل المثال، تحديد عرض الصورة باستخدام العرض، سيتغير ارتفاعه (ارتفاع) تلقائيا، الاحتفاظ بالنسب. والعكس صحيح، عند تحديد المرتفعات فقط (الارتفاع)، سيتغير عرضها تلقائيا، وإنقاذ نسب الصورة.

نموذج التعليمات البرمجية دون تحديد حجم الصورة

النتيجة في المتصفح

رمز الصفحة

نموذج التعليمات البرمجية مع تغيير في حجم الصورة v.css

النتيجة في المتصفح

رمز الصفحة

نمط \u003d "العرض: 150px؛"\u003e

في كلا المثالين، فإن نفس الصورة الموضحة أعلاه هي نفس الصورة بحجم 300x184px (العرض والارتفاع). في 1 مثال، عرضت الصورة في المتصفح دون تغيير بالحجم الأصلي 300x184px T. إلى. لم تشير CSS إلى العرض والارتفاع. وفي 2 مثال، تم عرض الصورة في المتصفح خفضت 2 مرات. إلى. تم الإشارة إلى عرض 150 بكسل، يتم تغيير الارتفاع تلقائيا إلى 92 بكسل. كما ترون، الخاصية الارتفاع، لا يمكنك تحديد كل شيء لأنه يتغير تلقائيا بما يتناسب مع العرض.

إذا قمت بتحديد كلا المعلمين: العرض (العرض)، الارتفاع (الارتفاع) ولن يتوافقون مع النسب، ثم ستحصل الصورة على مثل هذا الحجم تماما، ولكن في شكل مضغوط أو ممتد، اعتمادا على القيم.

لماذا غير مرغوب فيه بزيادة الصور

هام: زيادة حجم الصورة مصحوبة بفقدان الجودة. عند التغيير بأي طريقة من المهم ضبط القيم أقل من الصورة الأصلية، أي فقط للحد.

إذا قمت بتعيين الحجم في بكسل أكثر من الصورة المصدر، فستتدهور الجودة. وسيكون فقدان الجودة مرئيا بوضوح، لأن الكمبيوتر لا يمكن أن يضيف بكسل جديد، فيمكنه فقط زيادة حجم تلك الموجودة. كلما زادت الزيادة في الصورة من القيمة المصدر، وأسوأ جودة وحدات البكسلات المربعة مرئية بشكل واضح.

لتغيير حجم الرسم مع HTML إلى العلامة يتم توفير سمات العرض (العرض) والطول (الارتفاع). تستخدم وحدات البكسل كقيمة، في حين أن الحجج يجب أن تتزامن مع الأحجام المادية للصورة. على سبيل المثال، في الشكل. 10.6 تظهر الصورة التي لها أبعاد 100x111 بكسل.

تين. 10.6. صورة للحجم الأصلي

وفقا لذلك، يتم إعطاء رمز HTML لاستيعاب هذا النمط في المثال 10.4.

مثال 10.4. أبعاد الشكل

إذا تم تحديد أبعاد الصورة بشكل صريح، فإن المستعرض يستخدمها من أجل عرض منطقة فارغة في عملية تحميل المستند (الشكل 10.7). خلاف ذلك، فإن المتصفح ينتظر تحميل الرسم بالكامل، وبعد ذلك يغير عرض وارتفاع الصورة (الشكل 10.8). في الوقت نفسه، قد يحدث إعادة تهيئة النص، نظرا لأن حجم الصورة الأولية غير معروف وتركيب تلقائيا صغيرا.

تين. 10.7. لا يشار أحجام الصور ولم يتم الحذاء بعد

تين. 10.8. يتم تحميل الصورة، يتم إعادة تهيئة النص.

يمكن تغيير عرض وارتفاع الصورة على حد سواء إلى أصغر وأكسر. ومع ذلك، فإن سرعة الرسم لا تؤثر على سرعة الصورة، لأن حجم الملف يظل دون تغيير. لذلك، تقليل الصورة بحذر، لأن قد يسبب هذا حيرة من القراء، ولهذا السبب يتم تحميل مثل هذا الرسم الصغير. ولكن الزيادة في الحجم يؤدي إلى التأثير المعاكس - حجم الصورة كبير، ولكن يتم تحميل الملف النسبي إلى صورة نفس الحجم بشكل أسرع.

في التين. 10.9 يوضح نفس الصورة كما هو موضح في الشكل. 10.6، ولكن مع زيادة العرض المزدوج والطول.

تين. 10.9. عرض الصورة الموسعة في المتصفح

سيبقى الرمز لمثل هذا الرقم دون تغيير تقريبا ويظهر في المثال 10.5.

مثال 10.5. تغيير حجم الشكل

يسمى مثل هذا التغيير في الحجم خزان، في حين أن خوارزمية المتصفح في قدراتها أدنى من محرري الرسوم البيانية. لذلك، من الضروري زيادة الصورة بهذه الطريقة فقط في حالات خاصة، ونوعية الصورة تفاقمت للغاية. من الأفضل الاستفادة من بعض برنامج الجرافيك. الاستثناءات هي الرسومات التي تحتوي على مناطق مستطيلة. في التين. 10.10 نمط من النمط الذي يحتل 54 بايت وله حجم أول من 8 إلى 8 بكسل، ارتفع إلى 150 بكسل.

تين. 10.10. زيادة الصورة

تستخدم المتصفحات خوارزمية لتفجير - BICUBIC (تعطي حدود سلاسة ومجموعة ناعمة من الألوان) ووفقا لأقرب النقاط (يحفظ المجموعة الأصلية من الألوان وحدة الحواف). يتم استخدام أحدث إصدارات المتصفحات من قبل خوارزمية Bicubic، والمتصفحات القديمة، على العكس من ذلك، الخوارزمية في أقرب نقاط.

سيتم تغيير حجم الصورة مع مراعاة الحجم المحدد في سنتيمترات (ملليمتر، بوصة)، بالإضافة إلى مراعاة الحجم المحدد في DPI، وفقا لمعايير الطباعة الورقية. يمكن الإشارة إلى الأحجام في سم، MM و بوصة بدقة الألف، على سبيل المثال، بدلا من تنسيق 15x10، من الممكن تعيين 15،201X10،203 سم.

الجدول مع الأحجام القياسية للصور مع موقف عمودي (صورة):

تنسيق الصورة في سنتيمترات (سم)	حجم ملليمتر (مم)	الحجم في بكسل (للحصول على طباعة 300 نقطة في البيني)	ابعاد متزنة (مع اتجاه المناظر الطبيعية)
3x4. (بعد تقليم اليد)	30x40.	354x472.	4:3 (1.33)
3.5x4.5. (بعد تقليم اليد)	35x45.	413x531.	4:3 (1.33)
9x13.	89 × 127.	1063x1535.	10:7 (1.43)
10x15.	102x152.	1181x1772.	3:2 (1.5)
13x18.	127x178.	1535x2126.	7:5 (1.4)
15x20. (≈a5)	152x203.	1772x2362.	4:3 (1.33)
15x21.	152x216.	1772x2480.	4:3 (1.33)
18x24.	178x240.	2126x2835.	19:14 (1.36)
20x25.	203x254.	2362x2953.	5:4 (1.25)
20x30. (≈a4)	203x305.	2362x3543.	3:2 (1.5)
30x40.	305x406.	3543x4724.	4:3 (1.33)
30x45.	305x457.	3543x5315.	3:2 (1.5)

حجم ورقة الورق القياسية تنسيق A4 - 21x29.7 سم أو 2480x3508 بكسل في 300 نقطة في البوصة. يمكن رؤية أحجام تنسيقات الورقة الأخرى في صفحة ويكيبيديا، ولكن فقط لا تنس أن هناك أبعاد في ملليمتر وبوصة، أي في الإعدادات الموجودة في هذه الصفحة تحتاج إلى تحديد القيمة المناسبة.

إذا كنت ترغب في تغيير حجم الصورة دون DPI (DPI)، فهذا هو، فقط أبعاد التنسيق المحدد، ثم تحتاج إلى ضبط المعلمة "الحجم في DPI" إلى "0" في الإعدادات.

الصورة المصدر لا تتغير. سيتم تزويدك ب صورة معالجتها أخرى.

1) حدد الصورة بتنسيق BMP، GIF، JPEG، PNG، TIFF:

2) أدخل تنسيق الصورة المطلوب في سنتيمترات أو ملليمتر أو في بوصة
التنسيق المطلوب: عاشر في المليمترات (مم) سنتيمترات (سم) بوصة (بوصة)
(التنسيق المحدد الافتراضي 15x10.التي تناسبها للألبوم الصور (الأفقي)، للحصول على صورة (رأسية) الصور هذه القيم تحتاج إلى أن تكون مبادلة، وهذا هو، تحديد 10x15.، كما هو مبين في الجدول) الحجم في DPI: (0 \u003d "لا تنظر في DPI، لإجراء نسبة بناء على التنسيق المحدد")
(يمكن اعتبار حجم المصدر JPG Image في DPI بيانات تعريف) نوع التغيير الحجم دقيق إلى الأحجام المحددة:
مع مراعاة النسب وتشذيب الحواف غير الضرورية
المطاط تمتد أو تضييق، دون التشذيب
دون التشذيب، مع إضافة الوردي الأحمر الأرجواني الفيروز الأزرق Celent الأخضر الأخضر اللون الرمادي اللون الرمادي باللونين الرمادي على طول الحواف المرفقة ب: الجانب الأيمن الأيسر الأيسر من الصورة

أنت لا تعرف كيفية زيادة حجم الصورة؟ هذه مهمة بسيطة للغاية، لأن كل ما تحتاجه مثبت بالفعل على جهاز الكمبيوتر الخاص بك. اقرأ هذا الدليل، وسوف تتعلم كيفية تغيير حجم الصورة باستخدام 5 أدوات بسيطة.

الطريقة 1. كيفية تغيير حجم الصور في Microsoft Paint

1. العثور على وتشغيل MS الطلاء. يتم تثبيته مسبقا على جميع إصدارات نظام التشغيل. شبابيك. بدء\u003e جميع البرامج\u003e القياسية\u003e الطلاء:

1. خذ الصورة إلى نافذة الطلاء أو استخدامها القائمة\u003e فتح (CTRL + O).
2. في القائمة الرئيسية للبرنامج، ابحث عن عنصر "تغيير الحجم" وحدده:

1. تفتح لوحة تغيير الصور ونسب الصورة. يمكنك تحديد القيمة في البكسل. لا تنس التحقق من مربع الاختيار " حفظ النسب" خلاف ذلك، سيتم تشويه الصورة:

1. لزيادة حجم الصورة، انقر فوق الزر "موافق" وحفظ الصورة.

النصيحة:

• إذا فشل في تعيين الصور المرغوبة، دون امتدادها، يمكنك استخدام أداة "التقليم" لإزالة الحواف غير الضرورية. كيفية القيام بذلك، الموصوفة في الفقرة 3؛
• لفتح الصورة بشكل أسرع، انقر فوقه انقر بزر الماوس الأيمن وحدد عنصر العنصر من قائمة السياق فتح مع الطلاء»;
• من الأفضل حفظ الصورة بنفس التنسيق مثل الأصل.

الطريقة 2. كيفية تغيير حجم الصور في معرض صور MS

1. إذا لم يتم تثبيت معرض صور Microsoft على جهاز الكمبيوتر الخاص بك ( ابدأ\u003e معرض الصور)، تحتاج إلى تنزيله وتثبيته كجزء من نظام التشغيل Windows Essentials 2012؛
2. تشغيل معرض الصور MS وابحث عن ملف الرسوم الخاص بك؛
3. انقر فوقه انقر بزر الماوس الأيمن وحدد "تغيير الحجم ...":

1. اختر مسبقا جاهزا: " صغير 640 بكسل"،"، "منتصف 1024"، "1280 كبيرة"، إلخ.

1. انقر " تغيير حجم وحفظ" بعد زيادة حجم الصورة، سيتم وضع الصورة في نفس المجلد، وستبقى أيضا الأصلي.

النصيحة:

• إذا كنت بحاجة إلى تحديد حجم الصورة بالضبط، في القائمة المنسدلة، حدد " العادة"وقم بتعيين الحجم في معظمها من الصورة؛
• لتغيير حجم العديد من الصور في نفس الوقت، حددها عن طريق الضغط باستمرار على مفتاح CTRL.

الطريقة 3. كيفية تغيير حجم الصورة في البوسعكيب

يمكنك زيادة حجم الصورة في فوتوشوب. أو استخدام لهذا التصورك.

1. قم بتحميل البصوص وتثبيته. تشغيل البرنامج؛
2. انقر فوق علامة التبويب "محرر" وابحث عن الصورة التي تريد تغييرها:

1. في الجزء السفلي من الصورة، يوجد زر "تغيير الحجم"، انقر فوقه.
2. تعيين حجم صورة جديد. تأكد من الخيار " الحفاظ على نسبة الجانب»تمكين وانقر فوق" موافق ":

1. حفظ الصورة المحررة.

النصيحة:

• إذا كنت بحاجة إلى تغيير حجم الصور المتعددة، فاستخدم علامة التبويب " محرر دفعة" إضافة مجلد وتغيير حجم جميع الصور في ذلك؛
• إذا كنت لا تعرف الحجم الدقيق، فيمكنك ضبط "النسبة المئوية" من حجم المصدر.

الطريقة 4. كيفية تغيير حجم الصور في IrfanView

1. تثبيت IrfanView - أداة رائعة للعرض وزيادة حجم الصورة؛
2. أضف صورة عن طريق إلقاءها في إطار البرنامج، أو بالنقر فوق الزر الأول في شريط الأدوات:

1. انقر فوق علامة التبويب "صورة"، حدد " حجم / نسبة» ( CTRL + R.);
2. قم بتثبيت الحجم الجديد في بكسل أو سنتيمتر أو بوصة أو كنسبة مئوية من الصورة الأصلية:

1. حفظ الصورة.

النصيحة:

• يمكنك استخدام الأبعاد القياسية: 640 لكل 480 بكسل، 800 لكل 600 بكسل، 1024 لكل 768 بكسل، إلخ؛
• لحفظ صور عالية الجودة، تأكد من تعيين قيمة 300 على الأقل لمعلمة DPI.

الطريقة 5. كيفية تغيير حجم الصورة عبر الإنترنت

1. لتوسيع حجم الصورة عبر الإنترنت، انتقل إلى موقع Picresize.
2. انقر على " تصفح."لاختيار صورة. انقر " يكمل.»:

1. حدد النسبة المئوية للصورة الأصلية، على سبيل المثال، 50٪ أقل. تعرض الأداة حجم الصورة عند الإخراج. بدلا من ذلك، يمكنك إدخال الحجم الدقيق عن طريق التحديد في عنصر القائمة المنسدلة " حجم مخصص»: