Feature Image Sizing

  • Author
    Posts
  • #841714

    suzsteinert
    Member

    Hi,

    I’m having trouble sizing Featured Images correctly on the homepage of my new travel site.

    I’m using the Fresh & Clean theme with custom CSS. I wanted to make the Featured Image larger, so purchased the Custom Upgrade and attempted to do so with my very basic knowledge of CSS. I’ve tried all the code combos I can think of in terms of image width, height, alignment, pixel size, etc… however, the images still comes out mis-proportioned in the frame: always blown out, slightly stretched, and with everything but the center cropped out. (Even super high res versions also lose their crispness).

    The only specifications Fresh & Clean’s developer gives for Feature Images is this:
    “The image must be at least 840 pixels wide, or else the post won’t appear in the slider.”

    In terms of photo editing, I’ve tried making high-res images much smaller, then uploading. I’ve also done a lot of cropping and sizing in Photoshop and re-uploading, but the image always displays the same way within the frame no matter what I do.

    GOAL: I just want chosen images to display proportionately in the Featured Image frame. Do the theme’s Featured Image settings make this impossible when the frame itself is re-sized? Is there just some coding I don’t know that will fix the problem? Or photo editing technique I can’t figure out?

    My Current CSS:

    section.featured {
    border:0 solid #12C0C9;
    width:auto;
    opacity:0;
    margin:0 0 -1.4em;
    }

    section.featured img,section.featured {
    vertical-align:top;
    width:1200px;
    height:375px;
    }

    section.featured img {
    max-width:85%;
    max-height:85%;
    }

    section.featured + .featured {
    position:absolute;
    top:0;
    left:0;
    right:0;
    }

    Original CSS:

    }
    section.featured {
    border: 10px solid #ececec;
    margin: 0 0 3.35%;
    width: auto;
    }
    section.featured img,
    section.featured {
    vertical-align: bottom;
    height: auto;
    }
    section.featured img {
    width: 100%;
    }
    section.featured + .featured {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    }

    Thanks to anyone who can help!

    Suzanne

    The blog I need help with is explore-differently.com.

    #841798

    suzsteinert
    Member

The topic ‘Feature Image Sizing’ is closed to new replies.