תג <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">