תג <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 (שעון UTC).
[[["התוכן קל להבנה","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 (שעון UTC)."],[],[]]