לפעמים, נדרש להתאים תמונה למימד נתון מסוים. אנו יכולים לשנות את גודל התמונה על ידי ציון הרוחב והגובה של התמונה. פתרון נפוץ הוא להשתמש ב- רוחב מקסימלי: 100%; ו גובה: אוטומטי; כדי שתמונות גדולות לא יחרגו מרוחב המיכל שלהן. ה רוחב מקסימלי ו גובה מקסימלי המאפיינים של CSS עובדים טוב יותר, אך הם אינם נתמכים בדפדפנים רבים.

דרך נוספת לשנות את גודל התמונה היא באמצעות התאמה לאובייקט property , המתאים לתמונה. מאפיין CSS זה מציין כיצד גודל סרטון או תמונה משתנה כך שיתאים לתיבת התוכן שלו. הוא מגדיר כיצד אלמנט משתלב במיכל עם רוחב וגובה מבוססים.

מחרוזת כמערך

ה התאמה לאובייקט מאפיין מוחל בדרך כלל על תמונה או וידאו. מאפיין זה מגדיר כיצד אלמנט מגיב לרוחב ולגובה של המיכל שלו. בעיקר ישנם חמישה ערכים של התאמה לאובייקט רכוש כגון למלא, להכיל, לכסות, אין, להקטין, ראשוני , ו לָרֶשֶׁת . ערך ברירת המחדל של מאפיין זה הוא 'למלא' .

דוגמא

בדוגמה זו, אנו משנים את גודל התמונה באמצעות ה- רוחב מקסימלי: 100%; ו גובה: אוטומטי; נכסים.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

תְפוּקָה

דוגמא

בדוגמה זו, אנו משתמשים ב- התאמה לאובייקט: כיסוי; תכונה.

כיצד לאתחל מערך ב-java

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

תְפוּקָה

בדוגמה לעיל, השתמשנו ב- כיסוי ערך של התאמה לאובייקט תכונה. בדומה לדוגמא לעיל, אנו יכולים להשתמש בערכים האחרים של ה התאמה לאובייקט מאפיין כדי לשנות את גודל התמונה.