Carousel image resolution

Question

Carousel image resolution

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I have been looking for some option but I have not found how to configure the resolution of the carousel.

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

Inthecarouselitlookslikethis:

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

Does this setting exist in the carousel? Or does it have to be done by css?

My carousel code :

<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;
}

css twitter-bootstrap

asked by anonymous 19.02.2015 / 23:43

2 answers

How to create a vector that displays the frequency of each element in an array? Button to add a new form and a new AngularJS field

score 1 · Answer 1

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

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

You should set min-width of images to 100% so that it tracks the size of your DIV parent and position: relative to have the reference of carousel-inner .

Getting:

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

Example in JSBIN: link

score -1 · Answer 2

Enter background-position:center center; in 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;
}