[JasonRParticipant]

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.

[JasonRParticipant]

Client still saying image looks “skewed and distorted”.

Any help is greatly appreciated.

[Steven WatsonParticipant]

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;

[BionicClickParticipant]

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”

[Author]

Posts