לחתוך לוגו בלי פוטושופ — scale + transform-origin

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

הרעיון: שמים את התמונה בתוך "חלון" קטן, ומה שחורג מהחלון — פשוט לא נראה. את זה עושה overflow: hidden ("כל מה שגולש החוצה — הסתר"). ואז מגדילים את התמונה וממקמים אותה כך שבדיוק האזור הרצוי ייפול בתוך החלון:

<span class="logo-chip">
  <img src="/logo.jpeg" alt="Ori Software" />
</span>

.logo-chip {
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;    /* מה שמחוץ לריבוע — נחתך */
}
.logo-chip img {
  width: 100%; height: 100%;
  object-fit: cover;               /* מלא את החלון בלי לעוות */
  transform: scale(2.3);           /* הגדל פי 2.3 */
  transform-origin: 53% 38%;       /* סביב הנקודה הזו בתמונה */
}

שתי אבני הבניין כאן שוות היכרות בפני עצמן:

object-fit: cover אומר לתמונה "מלאי את כל השטח שהוקצה לך, גם אם צריך לחתוך שוליים — רק אל תימתחי ותתעווי".

transform-origin הוא הסוד האמיתי: כשמגדילים אלמנט עם scale, הוא גדל סביב נקודה — כברירת מחדל המרכז שלו. שינוי הנקודה הזו קובע בפועל איזה אזור מהתמונה יישאר בתוך החלון אחרי ההגדלה. 53% 38% = קצת ימינה מהמרכז, בגובה השליש העליון — בדיוק איפה שהסמל יושב בקובץ שלי.

מתי הטריק נכון: כשהמקור עשוי להתחלף (לוגו חדש? מכווננים שני מספרים במקום לחתוך מחדש), או כשאין גישה לעורך תמונות. מתי לא: אם קובץ המקור כבד — עדיף חיתוך אמיתי, כדי שהגולש לא יוריד בייטים שלא יראה.