Fluid full width featured image

[Are Martin]

Is there any way to make the featured image fluid and full width (entire viewport) when page-header/featured image is set to above header?

I know that this is an option with the page header add-on when using a background image and I have already done this on some pages.

It would be convenient if the standard featured image behaved in the same way when the page header add-on is not in use.

I have a lot of old posts with a featured image that i would like to be fluid and full width and while i could use the page header add-on and go back and change them all one by one it would save me a lot of work if there was some css trick to make them all fluid and full width and then I just set the customizer to place it “above content” to make it appear full width above the post.
If this is at all possible I would also like to be able to set a max height for the featured image?

[Tom]

Hi there,

It’s possible to make them full width, but not full height without losing quality of the image (it wouldn’t look good).

Are you wanting to do it on all posts and pages?

[Are Martin]

Hi, thanks for quick reply! I want it to apply to all posts with a featured image set. I don´t want the image to be full height, I would instead like to limit the height to about 500px so the image appears sort of like a large full width banner.

[Tom]

Give this CSS a try:

.page-header-image-single.grid-container {
      max-width: 100%;
}

.page-header-image-single img {
    width: 100%;
}

[Are Martin]

This works! 🙂 The image is now full width. However the height of the image pushes the content below the fold. I would also like to limit the height of the featured image the way it is possible on the page header add-on so the image becomes like a sort of banner.

[Tom]

If you limit the height, you’ll squish your image and it will lose quality/look bad.

.page-header-image-single img {
    max-height: 200px;
}

[Are Martin]

Ok, is it possible to do it like in the page-header where there is a crop effect?

[Joseph]

Tom, in Sections when I add the background image in Fluid the height is minimal although the background image is set to at least 960px in height in mobile view. It looks good on desktop but short in mobile view. This will give you an idea of what I am talking about.
Looking at this in mobile view you will see the background stops at the top.
http://www.sa-dwts.org/dancers/

How can I get the full cover in mobile view?

Thanks in advance.

[Tom]

The columns plugin you’re using isn’t clearing the container once it’s done with the columns.

Try adding this after the shortcode:

<div class="clear"><!-- clear the columns --></div>

[anand]

this will work

.page-header-image-single img {
    width: 100%;
	object-fit: cover;
      object-position: 0 0;
	height:400px;
}

object position to cut the image from the top without which you can have the center portion

[Afeef]

None of the above worked for me, neither in parent theme CCS editor or child theme style sheet.

[Tom]

Any chance you can link me to one of the pages where it should be working?

[Author]

Posts