- This topic has 22 replies, 2 voices, and was last updated 1 year ago by
.
Viewing 23 posts - 1 through 23 (of 23 total)
-
Hi, welcome
It needs add JavaScript codes(js codes)
1. install a plugin named Simple Custom CSS and JS(link). The free version is enough. Please go to Custom CSS & JS > Add Custom JS to add the javascript codes.
2. Clean the input box, add js codes(below), click publish
jQuery(document).ready(function( $ ){ function adjustImageContainers() { document.querySelectorAll('.grid-stack img').forEach(img => { const imgWidth = img.offsetWidth; const imgHeight = img.offsetHeight; const naturalWidth = img.naturalWidth; const naturalHeight = img.naturalHeight; if (!naturalWidth || !naturalHeight || !imgWidth || !imgHeight) return; const imgRatio = naturalWidth / naturalHeight; const containerRatio = imgWidth / imgHeight; let rightSpace = 0, bottomSpace = 0; if (imgRatio > containerRatio) { const renderedHeight = imgWidth / imgRatio; bottomSpace = (imgHeight - renderedHeight) / 2; } else if (imgRatio < containerRatio) { const renderedWidth = imgHeight * imgRatio; rightSpace = (imgWidth - renderedWidth) / 2; } const container = img.closest('.grid-stack-item')?.querySelector('.grid-item-con-text-show'); if (container) { container.style.marginTop = ''; container.style.marginLeft = ''; if (bottomSpace > 0) { container.style.marginTop = <code>-${bottomSpace}px</code>; } if (rightSpace > 0) { container.style.marginLeft = <code>-${rightSpace}px</code>; } } }); } setTimeout(adjustImageContainers, 200); let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(adjustImageContainers, 200); }); });
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from 
Viewing 23 posts - 1 through 23 (of 23 total)
- You must be logged in to reply to this topic.