הגדרת המאפיינים 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">