علامة <img>
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يساعد ضبط السمتَين width
وheight
في علامات <img>
على منع
متغيّرات التصميم. وتتيح هذه المعلومات للمتصفح الاحتفاظ بالمقدار الصحيح من المساحة للصورة.
ضبط السمتَين width
وheight
: يجب ضبط قيمتَي هاتين السمتَين
لمطابقة أبعاد الصورة نفسها (أي حجمها
الأساسي)، بدلاً من الأبعاد التي سيتمّ عرض الصورة بها.
ضبط نمط الصورة حسب الحاجة: بناءً على النمط الحالي للصورة،
قد تؤدي إضافة السمتَين width
وheight
إلى عرض الصورة بشكلٍ مختلف. في كثير من الحالات، يمكن حلّ هذه المشكلة عن طريق إضافة السمة height: auto
أو
width: auto
إلى التصميم الحالي.
نمط CSS السابق |
تغيير إلى |
img { width: 100%; } |
img { width: 100%; height: auto; } |
img { max-width: 100%; } |
img { max-width: 100% height: auto; } |
img { height: 100%; } |
img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2024-03-13 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2024-03-13 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]