Make an Image the Full Width of a Page

  • Jake Huddleston

    (@jake-huddleston)


    11 years, 4 months ago

    I am trying to get an image on a page to expand to the entire width of the page/site. Here is my site. The image I am trying to expand is on the home page:

    http://www.jakehuddleston.com

    The image dimensions, the code in the page HTML editor, and the code in the style sheet all indicate full-width dimensions, and yet the image only expands part of the way across the site width.

    Style Sheet:

    LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
	margin: 0 auto;
	width: 940px;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-attachment #content {
	margin: 0 auto;
	width: 940px;

    Page HTML Editor:

    <p style="text-align: center;"><img class=" wp-image-469 aligncenter" alt="Website Slideshow - About Jake-01" src="http://www.jakehuddleston.com/wp-content/uploads/2012/12/Website-Slideshow-About-Jake-01-e1355439825424.png" width="940" height="343" /></p>

    Image dimensions are 940×343.

    Even with all these indicating a width of 940px for both the page width and the image, the image appears to only expand perhaps about 600px across the page. I would like to enlarge the image so it fills the width of the entire page from side to side.

Viewing 5 replies - 1 through 5 (of 5 total)
  • michael.mariart

    (@michaelmariart)

    11 years, 4 months ago

    Look at line 792 of your style.css file.

    #content img {
    height: auto;
    margin: 0;
    max-width: 640px;
    width: auto;
}

    That makes every image in yor page content 640 pixels wide as a maximum. If you change 640px to 940px you will get what you are looking for.

    It’s also a good time to suggest that you look at using something like Firebug to inspect the CSS properties of your template. That way you will be able to see things like this easily. It took me about 30 seconds to pinpoint this rule. 😉

    Thread Starter Jake Huddleston

    (@jake-huddleston)

    11 years, 4 months ago

    Hi michael.mariart,

    Thanks for the tips. Unfortunately, everything still seems to be the same after changing this value…I even verified the size of the image and deleted/reposted the image into my page. Still nothing…anything else it might be?

    I didn’t know that there was maximum image width separate from the page width, so thank you. I will definitely check out Firebug.

    Thread Starter Jake Huddleston

    (@jake-huddleston)

    11 years, 4 months ago

    Whoops, nevermind, I just went back to look over things again and the image now fits! Not sure why it took a few minutes, but it is working. Thanks again for your help!

    michael.mariart

    (@michaelmariart)

    11 years, 4 months ago

    It takes a few minutes at least normally because most browsers will cache CSS files. When you make changes to CSS you should always do a hard-refresh so that all of the files are refreshed. That’s something that tricks pretty much everyone. Even now I forget sometimes and go looking for what I’ve done wrong.

    Nailds

    (@nailds)

    10 years, 11 months ago

    Thank you, that worked for me except that the image places itself about 100px to the right going beyond the right margin of the page. I tried resizing it smaller in the stylesheet up to 800px as is now but it still stays on the right. Do you have any suggestions? Also, do you have any idea of how to remove all that white space above?
    http://zenith-italia.com/wp2/
    Thank you very much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Make an Image the Full Width of a Page’ is closed to new replies.