0

I have a bootstrap 2.3.2's carousel on homepage. It's dimesions are 870px × 320px. The images to be shown on the carousel have generally thinner like 620px × 350px; I want to stretch images to full-width (870px) while preserving current width/height ratio.

This can be done using 

.carousel { height:320px; width:870px; }
.carousel  .item { width:100%; max-width:100%; height:320px;}
.carousel  img { width:100%; height:auto; overflow:hidden; }

I want to overlap image's center point with carousel's center. Incoming image will be higher than carousel's height after stretching to 100% witdh. I want it to overflow top and bottom equally.

For example if I stretcg a 620px × 350px image to 870px width the new height value will be 490px approx. Substracting it from 320px overflowing height is 170px. So I want it to overflow 85px from top and 85px from bottom.

Image 1 is what I have and Image 2 is what I desire.

Image 1

Image 2

What I have tried is to add margin-top with negative value which is not recommended. Also I have no chance to make calculation in CSS. It should be shift up a bit only.

Example Code

zkanoca
  • 9,664
  • 9
  • 50
  • 94
  • 2
    What have you already tried? I don't want to waste your time suggesting simple potential fixes if you've already done it. – dan.john.daly Sep 02 '14 at 13:07
  • 1
    Can you add a codepen/jsfiddle? You will get a quicker response. – ESR Sep 02 '14 at 13:08
  • This has already been answered here: http://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive – Lucky Edward Sep 02 '14 at 13:36
  • Another solution, same issue: http://stackoverflow.com/questions/17290701/maintain-image-aspect-ratio-in-carousel?rq=1 – Lucky Edward Sep 02 '14 at 13:37

0 Answers0