Featured Image Scaling is failing

I am experiencing a critical issue with the Featured Image display on our Single Post Template.

The image is being cropped at the top and bottom with the Single Post Bg Featured Image, (e.g., faces are cut off) because the container height is fixed and incompatible with the image’s aspect ratio.

Also using Single Post Featured Image with custom CSS (see below) does not contain the image but cuts off below half of image:
.tdb_single_featured_image img.entry-thumb {
object-fit: contain !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
.tdb_single_featured_image {
max-height: 500px !important;
overflow: hidden;
}

Good to understand that all images are served through the plugin WP Media Folder Cloud add-on from Google Drive, all images are resized offline with XN-Resize, before uploaded in media library folder in WPMF Google Drive, to be constrained to max 1400x600px size. So images have no seperate thumbnails created in Google Drive. The are coded as thumbnails automaticly inside Big Grid and Flex blocks.

Technical Cause and Conflict

Fixed Height Conflict: The core problem lies in the theme block used to display the header image. Specifically, the tdb_single_bg_featured_image block (which was previously used, or its properties are still inherited) has a hard-coded default height value (600px) that cannot be removed or set to ‘auto’ in the TagDiv Composer settings. This fixed height creates an inflexible CSS container.

Rendering Override: The theme’s rendering engine (or the WP Media Folder Cloud Add-on) applies a height constraint via an inline style or theme JavaScript (JS) that executes with the highest priority, forcing the image to fit the limited height while applying overflow: hidden.

CSS Failure: All attempts to override this constraint using standard CSS (Child Theme, Customizer, and direct Block CSS injection) fail to work against the theme’s rendering logic.

Desired Outcome and Required Solution

The required behavior is the precise inverse of the current rendering. The image must behave exactly like the CSS rule object-fit: contain.

Goal: The image must scale down proportionally based on the available width of the column, ensuring the entire image (full height and width) is visible within the container without any cropping. The container’s height must then dynamically adjust (height: auto) to accommodate the image’s resulting proportional height.

I require assistance in disabling the internal hard-coded height constraint (600px) on the Featured Image block within the TagDiv Composer’s source files, as external CSS solutions are being ignored, or have a workaround presented with custom code that can do the job.

Since Single Post Bg Featured Image is a background image this is difficult. The element is placed inside Single Post Featured Image, to be able to show caption. In the Extra Class of CSS of Single Post Featured Image we no have placed remove-image. When showing the image in this element it only shows with setting 485×360 but then doubles in height strangly.

Any help and solution in this would be much appreciated!

• This topic was modified 8 months by regio-online.

Thanks Calin. That easy. I need to check my eyesite again I guess 😉

Thanks for explaining! Can be closed!