Resize photos from Bootstrap and Javascript

Asked

Viewed 626 times

1

I have a Javascript and Bootstrap made Carousel. It gets images from a database based on a click rank, but the images are all different sizes and end up interfering with the display of the Carousel, I’ve tried to change sizes in CSS inline everywhere, but I can’t solve.

Follows my code:

<div class="row col-md-6 col-md-offset-3">
                    <div id="carousel" style="width:100%;">

                        <?php foreach($ofertas as $indice => $teste): ?>
                            <img src="<?= Yii::getAlias('@web').$teste['ofe_imagem']?>" style="!important;"> 
                        <?php endforeach ?>

                    </div>


<script>

$('#carousel').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: true,
    nextArrow:'<button  style="position"class="right carousel-control"></button>',
    prevArrow:'<button style="z-index:5"class="left carousel-control"></button>',
    slidesToShow: 1,
    infinite: true,
    adaptativeHeight: true, 

});

-

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

php html css twitter-bootstrap

  • Guy puts up some prints there of how the pictures appear on the carousel, just like the code and the report doesn’t make sense... And which version of Bootstrap is using?

  • I skipped the images, and am using the latest version of Bootstrap

  • You want the images to occupy all the white space up to the blue edges?

  • Exactly, I want her to cover the entire div

2 answers

1


Victor,

See if this solves your problem. From what I understand, this will help you.

Give your image a fixed dimension using CSS such as:

.carousel-inner> .item> img {
  largura: 640px;
  altura: 360px;
}

  • Just closed the image, but I’ll try to keep working on that concept

  • 1

    Closed the image? What do you mean?

  • I managed to do, using your answer and that of Pbras, thank you very much!

  • Congratulations, if you need anything let me know.

0

Squeal

<div class="row col-md-6 col-md-offset-3">

for

<div class="row col-md-12">

You’re using only 6 bootstrap 12 speakers, and countering that gets the blank.

  • I managed to do, using your answer and that of Renan Osorio, thank you very much!

Browser other questions tagged php html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.