Twitter 2.2 carousel example: how to maintain image ratio?

Question

If you reduce your window browser width while you're on http://twitter.github.com/bootstrap/examples/carousel.html you can see that the background image aspect ratio changes. I would like to maintain it (1:1), cropping my image on the left, or on the right, or aligning it horizontally.

What do you suggest?

Answer 1

You've got 2 options, and both maintain the image ratio:

Option 1

background: url(yourimage.jpg) no-repeat center center / cover;

The last part is the background-size: cover property. It will make the background image zoom in depending on the browser width, to make sure it fills the whole div.

Example: http://i.imgur.com/0tQ9Rxm.png

Option 2

background: url(yourimage.jpg) no-repeat center center;

It's the same effect but without the zoom in part. The background will keep its aspect and remain centered, but if your browser width is bigger than your image width (in this case, 1500px), you'll see the background-color (in this case white).

Example: http://i.imgur.com/6x594jH.png

I recommend option 1. You only see the zooming effect if you resize your browser but almost nobody does, and the visitor will only see a filled background.

Answer 2

As a follow-up to @jgthms' reply, I used option 1. However, on iOS Safari the background image wasn't showing up at all. It appears that the one-line CSS syntax wasn't playing nice. By changing it to the following I was able to get it working:

background: url(yourimage.jpg) no-repeat center center;
background-size: cover;