تنظیم ویژگیهای width
و height
در تگهای <img>
به جلوگیری از تغییر طرحبندی کمک میکند. این اطلاعات به مرورگر اجازه می دهد تا فضای مناسبی را برای تصویر رزرو کند.
تنظیم صفات
width
وheight
: مقادیر این ویژگیها باید طوری تنظیم شوند که با ابعاد خود تصویر (یعنی اندازه ذاتی آن) مطابقت داشته باشند - به جای ابعادی که تصویر در آنها نمایش داده میشود.در صورت نیاز استایل تصویر را تنظیم کنید: بسته به استایل موجود تصویر، افزودن ویژگیهای
width
وheight
ممکن است باعث شود که تصویر متفاوت ارائه شود. در بسیاری از موارد، این مشکل را می توان با افزودنheight: auto
یاwidth: auto
به استایل موجود برطرف کرد.
استایل CSS قبلی | تغییر به |
---|---|
img { عرض: 100%; } | img { عرض: 100%; ارتفاع: خودکار؛ } |
img { حداکثر عرض: 100%; } | img { حداکثر عرض: 100% ارتفاع: خودکار; } |
img { ارتفاع: 100%; } | img { ارتفاع: 100%; عرض: خودکار } |
<img width="267" height="400" src="dog.jpg">