Preview Images being squished

  • angelapanetta

    (@angelapanetta)


    12 years ago

    Hi, I am trying to create a portfolio site using the Grid Theme Resposive theme https://www.dessign.net/grid-theme-responsive/

    My site is https://www.angelapanetta.com/

    The problem I am having is that some of my preview images are being squished to fit the rectangle preview shape, while some are just having a centre section shown with no squishing.

    I have no idea why some do this and some don’t, and I am new to wordpress and just starting to learn css, so it is a bit beyond me to work out why and how to fix it.It would appear that horizontal images are being squished, but this isn’t the case for all of them as you can see with the RobotNoir logo (the fourth image on the Logo category page).

    Any help is greatly appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Adam

    (@umbercode)

    I only see examples of “squishing” not of “centering”?
    Anyway, the squishing is done because you give the imgages both a width and a height. When both width and height are given, the browser will squish or stretch the image to fit. If you only define a width, the height will automatically be calculated retaining aspect ratio. The same applies to when you only define a height, in that case the width will be calculated maintaining aspect ratio. So you will want to remove either height or width.

    Thread Starter angelapanetta

    (@angelapanetta)

    Thank you for the reply. I’ve commented out the height in the css, but now it is just shrinking the images down to fit the width. I guess this is preferable, but looks messy to me. Do you know if there is a way I can just show a slice from the centre of the image, in a uniformly sized box?

    The weird part is that the RobotNoir logo is actually doing what I want it to do, and I can’t work out why.

    I’ll put the css that I think is relevant in:

    /* Content */
    .home_post_cont { float: left; margin-right: 34px; width: 228px; min-height: 331px; margin-bottom: 35px; position: relative; }
    .home_post_cont_last { margin-right: 0; }
    .home_post_cont img { width: 228px; /*height: 331px;/* -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
    .home_post_cont h3 { font-size: 14px; }
    .home_post_cont h3 a { color: #000; text-decoration: none; }
    .home_post_cont h3 a:hover { text-decoration: none; color: #666; }

    .home_post_content { color: #A0A0A0; font-size: 12px; padding-right: 30px; font-weight: normal; height: 270px;}
    .home_post_content .in_title { color: #fff; font-size: 14px; margin: 0; font-weight: bold; }
    .home_post_content h4 a { color: #fff; font-size: 14px; margin: 0; }
    /*.home_post_cat { position: absolute; bottom: -20px; left: 10px; color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; }*/
    .home_post_cat { color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; }
    .home_post_cat a { color: #A0A0A0 !important; text-decoration: none; }
    .home_post_cat a:hover { text-decoration: none; color: #666; }

    .single_left { float: left; width: 665px; }
    .single_left h1 { font-size: 13px; margin-top: 0; }

    .hover_caption {
    /* If you can count of CSS3 support: */
    background-color: /*rgba(0, 0, 0, 0.7)*/ #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;

    /* Or use a transparent image if you need to support bad browsers: */
    /*background-image: url(images/hover_caption_bg.png);*/

    /* NOTE: If you’re img elements have paddings or margins you’ll need to
    match them here to get things lined up properly. */
    }

    If it’s not possible I might just need to use a different template.

    Thread Starter angelapanetta

    (@angelapanetta)

    Ok, it seems to have fixed itself…no idea why, but images selected from the pre-uploaded media library will shrink to fit, while images I upload as I create the post will display through the centre, as I wanted. If anybody can tell me why, it would be much appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Preview Images being squished’ is closed to new replies.