Hi Per,

I understand your issue, here I have created a code only for your purpose:

<script>
jQuery( document ).ready( function() {
    var $featured = jQuery( '.single-portfolio .portfolio-featured-image' ),
        width = $featured.width(),
        height = $featured.height(),
        winWidth = jQuery( window ).width(),
        winHeight = jQuery( window ).height();
    if ( $featured.length === 0 ) {
        return;
    }
    var excessiveHeight = winHeight - height;
    if ( excessiveHeight < 0 ) {
        var headerHeight = jQuery( '.site-header' ).outerHeight();
        // Uncomment below line if you don't want to include header in viewport calculation (the image will be bigger)
        //headerHeight = 0; 
        var newHeight = height + excessiveHeight - headerHeight,
            newWidth = width * ( newHeight / height );
        $featured.css( {
            maxWidth: newWidth,
            marginLeft: 'auto',
            marginRight: 'auto'
        } );
    }
} );    
</script>

https://d.pr/v/Vx0hpM

To add the code to your site go to Theme Options > Footer > JavaScript & Tracking Code > Footer JavaScript

Hi Per,

Glad to hear that

Will set this ticket as solved from here.

Hi Per,

Sure you can modify the previous code to use the extra selector for blog posts as well:

.single-post .post-image .featured-image

So the final code would be:

<script>
jQuery( document ).ready( function() {
    var $featured = jQuery( '.single-portfolio .portfolio-featured-image, .single-post .post-image .featured-image' ),
        width = $featured.width(),
        height = $featured.height(),
        winWidth = jQuery( window ).width(),
        winHeight = jQuery( window ).height();
    if ( $featured.length === 0 ) {
        return;
    }
    var excessiveHeight = winHeight - height;
    if ( excessiveHeight < 0 ) {
        var headerHeight = jQuery( '.site-header' ).outerHeight();
        // Uncomment below line if you don't want to include header in viewport calculation (the image will be bigger)
        //headerHeight = 0; 
        var newHeight = height + excessiveHeight - headerHeight,
            newWidth = width * ( newHeight / height );
        $featured.css( {
            maxWidth: newWidth,
            marginLeft: 'auto',
            marginRight: 'auto'
        } );
    }
} );    
</script>