باگ تصاویر کشیده شده در وردپرس روی مرورگر کروم: علت و راه حل

اگر تا به حال در سایت‌های وردپرسی خود متوجه شدید که تصاویر در مرورگر کروم کشیده (stretched) می‌شوند و از کانتینر خود بیرون می‌زنند، احتمالاً با یک مشکل رایج مربوط به ویژگی sizes در تگ <img> مواجه شده‌اید.

۱. علت مشکل

وردپرس از نسخه ۴.۴ به بعد، از Responsive Images پشتیبانی می‌کند و به طور خودکار برای هر تصویر صفت‌های srcset و sizes تولید می‌کند تا مرورگر بتواند بهترین اندازه تصویر را بسته به عرض نمایشگر انتخاب کند.

صفت sizes مشخص می‌کند که عرض تصویر در طراحی ریسپانسیو چقدر است.

در برخی تم‌ها یا افزونه‌ها، مقدار sizes با فرمت auto, 100vw یا شبیه آن تولید می‌شود.

مرورگر کروم در این حالت بعضاً:

تصویر را بیش از اندازه واقعی کشیده و عرض آن را از کانتینر بیرون می‌زند.

این اتفاق به خصوص وقتی رخ می‌دهد که CSS کانتینر، max-width یا object-fit درست تنظیم نشده باشد.

دلیل دقیق: کروم سعی می‌کند از sizes برای انتخاب اندازه بهینه استفاده کند. وقتی مقدار auto در ابتدا وجود دارد، کروم آن را به‌عنوان اندازه واقعی تفسیر نمی‌کند و به همین دلیل تصویر کشیده می‌شود.

۲. راه حل در وردپرس با فیلتر ویژگی های تصویر (روش اول / پیشنهادی)

یک فیلتر ساده و حذف auto از خروجی html تصاویر این مشکل را حل میکند. کد زیر را در فایل functions.php قالب خود قرار دهید و مشکل به سادگی رفع میشود.

add_filter(
    'wp_get_attachment_image_attributes',
    static function ( $attr ) {
        if ( isset( $attr['sizes'] ) ) {
            $attr['sizes'] = preg_replace( '/^auto, /', '', $attr['sizes'] );
        }
        return $attr;
    }
);

• این کد با استفاده از فیلتر wp_get_attachment_image_attributes، صفت sizes را تغییر می‌دهد.
• مقدار auto که باعث اشتباه کروم می‌شود را حذف می‌کند.
• مرورگر کروم تصویر را به درستی ریسایز می‌کند و از کانتینر بیرون نمی‌زند.

۲.۲. راه حل در وردپرس با سی اس اس (روش دوم / ساده تر)

گاهی اوقات کافی است CSS ریسپانسیو تصویر درست شود. می‌توانید به <img> یا کلاس تصاویر مشکل دار خود این قوانین را بدهید:

/* 
کلاس تصاویر تولید شده در وردپرس را سلکت کنید مانند
.wp-post-image 
*/
img {
    max-width: 100%;
    height: auto;
    display: block; /* جلوگیری از فاصله اضافی پایین تصویر */
    object-fit: contain; /* یا cover بسته به نیاز */
}

• max-width: 100% باعث می‌شود تصویر از کانتینر بیرون نزند.
• height: auto تناسب تصویر را حفظ می‌کند.
• object-fit: contain تصویر را داخل کانتینر نگه می‌دارد بدون کشیده شدن.
• مناسب برای سایت‌هایی که نمی‌خواهند خروجی وردپرس را دستکاری کنند.
• ممکن است لازم باشد کدها به صورت !important اعمال شوند.