How to make Featured Images responsive?

There are a couple factors contributing to this:

1. This plugin uses a script called backstretch to display large featured images. The way that works is to cover the browser window with the image, regardless of the comparative height/width of the image and the screen. So on a mobile device, which is narrow but tall, the sides of the image will be cropped, usually quite a bit. It may work the other way on really wide screens, depending on the image.
2. The plugin has a setting to change the perceived height of the browser window, which can be helpful when dealing with site headers, so that the bottom edge of the image does not go below the bottom of the screen/window. If you go to Appearance > Display Featured Image for Genesis, and then the Backstretch Output tab, you can change the first setting there (Height) to something which will make the image feel less tall. If you set it to 97, which seems to be the height of your site header (on mobile, anyway), the bottom edge of the image should line up with the bottom edge of the browser window/screen, which can help with the overall “largeness” of the image.
3. Another setting on that same tab is the Maximum Height, which just adjusts the maximum possible height of the image, separately from the Height setting. This is really just CSS. You could use this setting to force more constraints on how large the image gets, or what you might consider is adding some custom CSS within a media query to your theme to make sure the image height on small screens is more pleasing to you.

For example, you could put something like this in a media query section for small screens:

.big-leader {
    max-height: 200px;
}

That may generally help output the image in a more proportional manner and lessen the backstretch effect somewhat. Hope that helps!

So there is a way to lessen this backstretch effect, but no way to code it to be fully responsible?
P.S. I tried method you offered too, thought there would be better way.

• This reply was modified 6 years, 9 months ago by n1cetouch.

It is responsive, but will look different than an image placed inline, or more traditionally. The backstretch script calculates the width/height of the area provided, and ensures that the image covers that area completely, instead of constraining the image to display it proportionally.

If you want to use this plugin without the backstretch script, you can use a filter such as display_featured_image_genesis_use_large_image and force the plugin to always use a smaller size image, which won’t use the backstretch script at all, at which point the images will behave more the way it sounds like you want. Another user wanted to go this route; I gave him some suggestions and example code here.

Works awesome, thank you!

Cool and responsive. But one more question: now though my images are responsive, I don’t get full screen image when I am on pc, i.e. before this my images were monitor wide, but now their maximum is 1024 pixels in width.

How do I make them full-width on monitors?

At this point, you just need to tinker with CSS to force the image outside of the natural boundaries imposed by the site styling. You can add this directly to your theme, or use the Additional CSS module in the Customizer. I did some tinkering with Chrome’s Dev Tools and this seemed like a good start:

.page .content,
.single .content {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

img.aligncenter.featured {
	width: 100%;
}

Hope that helps–

Thank you sooo much!

To be honest, I didn’t even think you respond me at first, but now my site looks EXACTLY like I want, you are the best!

Love you plugin and your support!