Skip to main content

Forums

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #161446
    JasonR
    Participant

    Noob des/dev here.

    DId cross-browser check on this site, but main slider image is stretching across the client’s screen (he sent me screen shot). It does not stretch across any resolution I tried or browser except older IE.
    http://www.thepeterwong.com
    Does client need to clear cache on their end or is there a bug I’m not seeing?
    Thanks.

    #165661
    JasonR
    Participant

    Client still saying image looks “skewed and distorted”.

    Any help is greatly appreciated.

    #165666
    Steven Watson
    Participant

    This reply has been reported for inappropriate content.

    Hi @JasonR

    It was stretched on my browser when I loaded the website up, on Chrome.

    Maybe alter your code under:

    .carousel-inner > .item > img

    with this:

    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    
    #166424
    BionicClick
    Participant

    the image is weird…I see you implemented the code provided above. its not helping.

    here is a link to a screenshot on my PC
    http://tinypic.com/r/f3unas/8

    here is the initial image
    http://www.thepeterwong.com/images/peterlargetype.jpg

    the reason is your setting a height and width on your images in the image area, and therefore your images are conforming to that areas dimensions of 867×850. Your images are NOT 867×850 they are all sorts of sizes.

    you set height of the img to 100% (stretching it) and max-width of 100% and therefore the images are being translated in a few browsers as width: 100% (stretching or shrinking your images)

    you can either create images that are exactly the height and width of your slideshow 867×850, or you can leave it as is, these are your choices unless you follow my guide below. IMO

    if i were you i would either create images that are 867×850 like the area your filling… or do the following:

    remove the light grey background behind the images on “.item”.

    do position: relative and NOT absolute on “.carousel-inner .item img”. and place a margin of 0px auto 0px auto so your image centers into the area…

    of course yor going to need to do something about images that are taller than 850.. so you can crop your images OR you can do an “overflow:hidden” on “.item”

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.