#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    2
    Rep Power
    0

    Client says image is skewed...but


    Client says main image on front page is "skewed". I've only been able to replicate a skew using an old version of IE...which I then was able to fix.

    However, client says they still see a skewed image. Had them refresh, clear cache etc. but continues to see a ''skewed'' image.

    I'm very new to design/dev so I need some help at this point.

    Peter Wong | American Handyman

    Thanks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    I didn't see the image (in the slider... I assume, that is what your client is talking about) as "skewed"; it's resolution definition becomes somewhat, uneven, as the window's size (browser's viewport) changes. Although, I think that can be corrected within the JavaScript of the slider and/or with media queries. There is a possibility..., that you may want to use higher resolution images (in the slider); in order to display a better image compression, which in turn..., may eliminate the "skew" effect.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    2
    Rep Power
    0
    Thanks for your reply. I'm not able to get a higher res image, but I did make some adjustments to the sizing and in all of the browser tests and size tests it looks fine to me but still waiting to hear from client.

    I do have media queries going on so it looks pretty good when you get it down to iphone size etc. I know there must be a better way to code the CSS.
    Thanks again
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    47
    Rep Power
    71
    The image is stretched because of the following on
    line 44 in carousel.css
    Code:
    .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
    }
    Setting the height to 100% is changing the aspect ratio of the image causing it to look elongated. You are better are offjust setting each item to be
    Code:
    max-width:100%
    and calling it a day. You will also probably have to take off the hardcoded height you have set on

    line 40 carousel.css
    Code:
    .carousel .item {
    height: 850px;
    background-color: #777;
    }

    Comments on this post

    • jamespayne agrees

IMN logo majestic logo threadwatch logo seochat tools logo