Geek Answers Handbook

Twitter 2.2 carousel example: how to maintain image ratio?

If you reduce the width of the browser window when you are at http://twitter.github.com/bootstrap/examples/carousel.html , you will see that the aspect ratio of the background image changes. I would like to keep it (1: 1) by cropping the image left or right or aligning it horizontally.

What are you offering?

+6
source share
3 answers

You have 2 options and both support image ratio:

Option 1

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

The last part is the background-size: cover property. This will increase the background image depending on the width of the browser to ensure that it fills the entire div.

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

Option 2

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

This is the same effect, but without zoom. The background will retain its aspect and remain centered, but if the width of your browser is greater than the width of your image (in this case 1500 pixels), you will see the background color (in this case white).

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

I recommend option 1 . You can see the zoom effect if you change the size of your browser, but almost no one does, and the visitor will see only the filled background.

+5
source

In response to @jgthms's answer, I used option 1. However, on iOS Safari the background image was not displayed at all. It seems that the single-line CSS syntax did not play well. By changing it to the following, I was able to make it work:

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

For those who, like me, have not seen where the CSS plays an in-context example here (with iOS style). I should note that this uses Bootstrap 3.1.1.

  <div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;"> <div class="container"> <div class="carousel-caption"> <p>Example text <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a> </p> </div> </div> </div>
0
source

More articles:


All Articles