Feature Image Sizing

• 

  suzsteinert · Member · Mar 9, 2012 at 10:47 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  suzsteinert · Member · Mar 9, 2012 at 10:48 pm

  • Copy link

  My site’s URL: http://www.explore-differently.com