- This topic is empty.
January 30, 2014 at 11:45 am #161446JasonRParticipant
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.
Does client need to clear cache on their end or is there a bug I’m not seeing?
Thanks.March 13, 2014 at 8:11 am #165661JasonRParticipant
Client still saying image looks “skewed and distorted”.
Any help is greatly appreciated.March 13, 2014 at 9:13 am #165666Steven WatsonParticipant
This reply has been reported for inappropriate content.
It was stretched on my browser when I loaded the website up, on Chrome.
Maybe alter your code under:
.carousel-inner > .item > img
position: absolute; top: 0; left: 0; max-width: 100%; height: auto;March 20, 2014 at 1:21 pm #166424BionicClickParticipant
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
here is the initial image
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”
- You must be logged in to reply to this topic.