‏تگ img می‌تونه از خودش سرریز کنه

به گفتهٔ تمانی عفیف تو این مقاله، اگه استایل‌های پیش‌فرض مرورگر رو روی تگ img نگاه کنی یه overflow: clip می‌بینی که اولش بی‌معنی به نظر می‌رسه — آخه یه تگ تنها که بچه‌ای نداره تا سرریز کنه. ولی خود تگ img نقش «ظرف» رو داره و منبع تصویری که توش لود می‌شه «محتوا»ست؛ همون رابطهٔ ظرف و محتوا که برای حرف زدن از overflow لازمه. تگ عکس در واقع یه replaced element هست با دو تا اندازهٔ جدا که مستقل کنترل می‌شن.

نویسنده سه موقعیت رو نشون می‌ده که این سرریز اتفاق می‌افته و ما هیچ‌وقت ندیدیمش، چون مرورگر کلیپش کرده: object-fit: cover که برای حفظ نسبت اصلی عکس، محتوا رو از ظرف بزرگ‌تر می‌کنه؛ border-radius که گوشه‌های گرد رو به یه محتوای مستطیلی تحمیل می‌کنه؛ و object-position که محتوا رو جابه‌جا می‌کنه بدون اینکه به ظرف دست بزنه. کافیه overflow: visible بذاری تا همه‌شون آشکار بشن.

بخش جالب دیگه مقدار none برای object-fit هست که کمتر کسی سراغش می‌ره. با این مقدار، محتوا اصلاً ری‌سایز نمی‌شه و اندازهٔ ذاتی خودش رو نگه می‌داره، هر عرض و ارتفاعی که با CSS به تگ بدی. مقدار پیش‌فرض هم برخلاف تصور خیلی‌ها fill هست که دقیقاً برعکس عمل می‌کنه و محتوا رو زورکی به اندازهٔ ظرف می‌رسونه.

نویسنده از همین مکانیزم چند دموی تمیز درمی‌آره: افکت hover که عکس رو تو قابش می‌نشونه، افکت سه‌بعدی، انیمیشن ورود با @starting-style و حتی اون لودر معروف — فقط با یه تگ عکس، بدون هیچ المان یا pseudo-element اضافه.

img {
  object-fit: none;
  object-position: 0% 0%;
  animation:
    x 2.1s infinite linear alternate,
    y 3.3s infinite linear alternate;
  animation-composition: add;
}
@keyframes x { to { object-position: 100% 0 } }
@keyframes y { to { object-position: 0 100% } }

خود نویسنده هم صادقانه می‌گه قصدش تبلیغ این ترفندهای عجیب نیست: همهٔ این دموها رو با روش‌های معمول‌تر و شهودی‌تر هم می‌شه ساخت. مزیت این راه فقط اینه که به المان اضافه نیاز نداری، پس جایی که ساختار HTML دست تو نیست حسابی به کار میاد. اون دکور آخری هم که با corner-shape ساخته، فعلاً فقط تو کروم کار می‌کنه.

نکات کلیدی:

• مرورگرها پیش‌فرض overflow: clip رو روی img می‌ذارن
• تگ img هم‌زمان ظرف و محتواست، با دو اندازهٔ مستقل
• object-fit: cover، border-radius و object-position هر سه سرریز می‌سازن
• مقدار پیش‌فرض object-fit همون fill هست، نه cover
• object-fit: none اندازهٔ ذاتی محتوا رو دست‌نخورده نگه می‌داره