Menus

/* --- Fix for Menu Image Heights --- */ .menu_img { /* * This is the key: it sets a consistent shape. * The height will now be based on the item's width. * * COMMON RATIOS TO TRY: * aspect-ratio: 1 / 1; /* Perfect square */ * aspect-ratio: 4 / 3; /* Standard landscape */ * aspect-ratio: 16 / 9; /* Widescreen landscape */ * * Pick the one that looks best on your page. */ aspect-ratio: 4 / 3; /* * These properties ensure your background image (from the ACF field) * scales correctly inside the new shape, instead of being * stretched or tiled. * * We use !important to make sure this code overrides any * existing theme or inline styles. */ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; /* This just cleans up any overflow, just in case */ overflow: hidden; }