CODEWITHSUNDEEP
javascripthtmlcss
HariChintha
HariChintha

Reputation: 37

Fix image dimensions / slideshow

I need to display some images in a view as a slideshow. Each image has different dimensions. These different dimensions making the slideshow weird. Is there any possibility to change the image dimensions to one fixed dimension. I hope I explained my problem clearly if not please excuse me. Thanks in advance.

Here is my HTML code.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZW..." alt="image1">
    </div>

    <div class="item">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZWNobm..." alt="image2">
    </div>

    <div class="item">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAAAAAAAAAAD//gAfTEVBRCBUZWN..." alt="image3">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Upvotes: 0

Views: 55

Answers (2)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

You cannot do this, unless you want to stretch the images (change the aspect ratio), which in my opinion is a bad idea.

If you look at this ad on Etsy they are using a fixed width and maintain the aspect ratio of the image, so height is variable... which means if the image is too short there will be blank space on the top and bottom of the image...

Upvotes: 0

jalil abbaszadeh
jalil abbaszadeh

Reputation: 26

add this line of code to your stylesheet file

.slideshow img { height: 380px;width: 100%}

then add "slideshow" class to the div that contains the slideshow images and items.

I hope this helps you.

Upvotes: 1

Related Questions