Carousel image resolution

Question

I’ve been looking for some option but could not find how to configure Carousel resolution.

I’ll give you an example. Have this image:

In the Carousel she looks like this:

Is there any way to make it whole, or a bigger part?

Does this configuration exist in Carousel? Or does it have to be done by css?

My code from the Carousel:

<section id="main-slider" class="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="carousel-content">
                        <h1>Horticultura Sustentável</h1>
                        <p class="lead">Horticultura Sustentável</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <div class="carousel-content">
                        <h1>IAC</h1>
                        <p class="lead">Lala <br>lala</p>
                    </div>
                </div>
            </div>
        </div><!--/.carousel-inner-->
        <a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
        <a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
    </section>

CSS:

#main-slider {
  background-image: url(../images/slider-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  padding: 200px 0;
  color: #fff;
}

Answer 1

You can apply the classes img-rounded and img-responsive.

In some cases it may not work, but you can get around the problem by overwriting the bootstrap’s default style.

You must define the min-width of images as 100% for him to follow the size of his DIV father and a position: relative to have the reference of the carousel-inner.

Staying:

.carousel-inner > .item > img {
    position-relative;
    min-width: 100%;
    height: 200px; /* Altura da imagem dentro do Carousel */
}

Example in JSBIN: http://jsbin.com/sefilorewu/1/

Answer 2

Insert background-position:center center; in the element #main-slider

#main-slider {
  background-image: url(../images/slider-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-position:center center;
  padding: 200px 0;
  color: #fff;
}