Images on home page

• 

  carripattison · Member · Jun 28, 2012 at 2:55 pm

  • Copy link
  • Add topic to favorites

  images stretched on home page
  aloha…i went into the css code to try and make the images on the home page of the fresh & clean template bigger. now when i chose a featured image it appears “stretched” on the home page. can you please tell me what i need to put in the css code so that the images come in the correct size and the width of them is not stretch as this distorts the photos.
  Blog url: http://drchriswood.wordpress.com/

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jun 28, 2012 at 4:35 pm

  • Copy link

  This block of custom CSS from your Appearance → Custom Design → CSS editor is causing the image distortion because it forces all of the images to 300 x 199 pixels exactly:

  .post img {
  	float:center;
  	min-width:300px;
  	max-width:300px;
  	max-height:199px;
  	min-height:199px;
  	padding:10px;
  	line-height:2em;
  	margin:0 auto 10px;
  	clear:both;
  }

  The images on the home page of the Fresh & Clean theme are generated by a function (not CSS) and WordPress.com doesn’t offer an option for updating theme code such as functions. That means you can’t change the size of the images themselves, however, you can update your CSS to stretch the images and get rid of the distortion by setting the height value to “auto.” Note that you’re still stretching the originally placed images which are set to 160 x 120 pixels in the theme and you can’t use CSS to update the images themselves and so the bigger you stretch them, the more likely you are to see loss in quality.

  Try replacing the block from above with this instead:

  .post img.post-thumbnail {
  	width:220px;
  	height:auto;
  	padding:10px;
  }

  You can try going larger than 220px as long as the image quality looks good to you.