WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Squished images (9 posts)

  1. Louise Franks Designs
    Member
    Posted 2 years ago #

    I'm new to WordPress so please explain things to me in simple terms :)

    The blog of interest is http://louisefranksdesigns.com/digiscrapping/

    I am currently using Fresh News on a Woo themes template. The problem I'm having is with the images that appear at the top of my posts on my homepage.

    There's like a small 500x250px (ish) sized image that sits at the top of each post on the home page. For some reason, the image here sometimes looks squished and sometimes it doesn't. If you look at the posts titled "Awaiting Autumn" and "Free mini kit" you'll see what I mean.

    I have tried just about everything I can think of to stop this happening but it seems to happen quite randomly. I have the same template on 3 other blogs and haven't had this problem on other blogs. For example, the images look fine on my personal blog here http://louisefranksdesigns.com/theblog/.

    Is anyone familiar with this template and could tell me what I might try to stop this happening?

    Thanks in advance.

  2. vtxyzzy
    Member
    Posted 2 years ago #

    The two images I see on your personal blog are both 500px x 195px (wider than they are tall), so they show correctly.

    The 'squished' images are 500px x 500px, so they get distorted into a 'flatter' space.

    The problem comes when not all images are the same size. If you make the area sized correctly for the short images, the tall ones will be flattened. If you make the area tall enough for the tall images, the short ones may be stretched out.

    Look for an option to set the size of Featured Images and play with that.

  3. Louise Franks Designs
    Member
    Posted 2 years ago #

    Thanks for your reply. I do have some "square" images though which also display fine. For example, the "free mini kit" image is square but displays fine.

    I have looked for an option to set the size of the featured image and it does let me change height/width but it doesn't let me stop it "squishing" it to size. I'll continue looking, thanks.

  4. vtxyzzy
    Member
    Posted 2 years ago #

    The 'free mini kit' image that is showing is this:

    http://louisefranksdesigns.com/digiscrapping/wp-content/uploads/2011/08/LFD_GardenParty_Preview-540x195.jpg

    That image is 540x195. Bring it up in a browser window to see.

    The Awaiting Autumn image is this:

    http://louisefranksdesigns.com/digiscrapping/wp-content/uploads/2011/09/LFD_AwaitingAutumn_Preview.jpg

    Take a look at it in a browser window to see the difference.

  5. Louise Franks Designs
    Member
    Posted 2 years ago #

    Hmmm that's weird because I never cropped the other image. Ok well thanks for that, I'll see what's going on with that then.

  6. vtxyzzy
    Member
    Posted 2 years ago #

    Because the name of the file includes the dimensions, I suspect that it was automatically cropped on upload. Perhaps a different method of upload was used, or an upload option changed.

  7. Louise Franks Designs
    Member
    Posted 2 years ago #

    I don't know (I don't remember doing so), but at least it gives me somewhere to start looking into it. Thanks for your help.

  8. vtxyzzy
    Member
    Posted 2 years ago #

    Try adding this to the end of your style.css:

    .box img {
        height: auto;
    }
  9. Louise Franks Designs
    Member
    Posted 2 years ago #

    Perfect! Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic