Skip to main content

The default Twenty Seventeen post and page featured images appear quite large in height especially on a laptop or computer screen. The height of these featured images can be reduced in size.

The default height of single post and page featured images.

A reduced height single post and page featured image.

The height of the featured image in this example has been reduced in size to 33% of the height of the screen.

Where and how to change the height of single post and page featured images:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

  • The 33vh height sets the size of the images to 33 percent of the height of the screen.
  • The object-fit line ensures that the image retains it’s original proportions and is cropped to fit the shape of the featured image bounding rectangle.

The CSS code:

.single-featured-image-header img {
	/* display: block; */
	/* margin: auto; */
	height: 33vh;
	object-fit: cover;
}
Share this page:
  • supereasy01 says:

    I have used the code and it works as designed. I am having an issue determining the actual size of a custom header image I would like to use. How exactly would I accomplish this, i,e, changing % to a fixed dimension. Also, if I may, is it possible to have the header image be the same size on front page and posts? thank you for this great site!

  • Phil says:

    Thanks for the queries and the solutions/comments so far. Can you please help me to understand then implement a change to Featured Image Height. The Front Page/static page is set with a height which fits the main landing page banner image. I have four subsidiarity pages/panels to put Featured Images onto to achieve the parallax function and there will be a separate height for each of these four images.

    I understand by “I put the CSS code into WP-ADMIN > Apariencia > Personalizar > CSS adicional …” in a reply to Esther that this was not entered into Customizer > Additional CSS. I expect this will affect all headers in all front page panels. Does this mean all images must carry the same height attribute?

    To get maximum effect and flexibility I would hope to chop n change Featured Images from time to time. A universal image height may restrict that.

    Thanks
    Phil

    • Hello Phil,
      The area at WP-ADMIN > Apariencia > Personalizar > CSS adicional is the same as the area at Customizer > Additional CSS. The former is written in Spanish as the site I was referring to had a Spanish WordPress installation, and yes the code at https://karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/ will affect all the headers on the front page.
      Without knowing how each chop and change of a panel image should appear for each panel and it’s size, the code cannot be written. The images are also scaled so that they effectively fill the viewable area of the browser whilst keeping the image proportions so that the image does not get squashed or stretched.
      With these many qualities of the panel images, customizing the appearance of each one every time a panel image is resized, how it should appear, and what the panel height should be, could require a lot of management than it may be worth, and the coding to create this could be quite complex. However, you know your priorities, but it is not something that I can look into at the moment.

  • Hi!
    I have just tried the CSS code and it´s not working??

  • >