<img> برچسب زدن

تنظیم ویژگی‌های width و height در تگ‌های <img> به جلوگیری از تغییر طرح‌بندی کمک می‌کند. این اطلاعات به مرورگر اجازه می دهد تا فضای مناسبی را برای تصویر رزرو کند.

  • تنظیم صفات width و height : مقادیر این ویژگی‌ها باید طوری تنظیم شوند که با ابعاد خود تصویر (یعنی اندازه ذاتی آن) مطابقت داشته باشند - به جای ابعادی که تصویر در آنها نمایش داده می‌شود.

  • در صورت نیاز استایل تصویر را تنظیم کنید: بسته به استایل موجود تصویر، افزودن ویژگی‌های width و height ممکن است باعث شود که تصویر متفاوت ارائه شود. در بسیاری از موارد، این مشکل را می توان با افزودن height: auto یا width: auto به استایل موجود برطرف کرد.

استایل CSS قبلی تغییر به
img { عرض: 100%; } img { عرض: 100%; ارتفاع: خودکار؛ }
img { حداکثر عرض: 100%; } img { حداکثر عرض: 100% ارتفاع: خودکار; }
img { ارتفاع: 100%; } img { ارتفاع: 100%; عرض: خودکار }

HTML

<img width="267" height="400" src="dog.jpg">