mohammad qasim

mohammad qasim

  • NA
  • 408
  • 0

how to set image width in image slider

Mar 24 2020 8:38 AM
 

I am using image slider , want to show images on slider with same width and height .

Problem:

How can I fix image width and height so all images looks same not big and small ( below image for reference )

My Code:

<div class="chat-panel panel panel-default" style="height:300px;width:400px">
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i>Dejavu Slider


<div style="height:300px;width:400px;border:solid">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="vertical-align: central;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<i data-target="#myCarousel" data-slide-to="4"></li>--%>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./../SiteAssets/ImageSlider/slide3.jpg" width=300px" height="200px" alt="Los Angeles">
</div>
<div class="item">
<img src="./../SiteAssets/ImageSlider/slide1.jpg" width="300px" height="200px" alt="Los Angeles">
</div>
<%-- <div class="item">
<img src="./../SiteAssets/ImageSlider/slide1.jpg" width="500px" height="300px" alt="Los Angeles">
</div>
<div class="item">
<img src="./../Style Library/Dejavu/images/LHR I.jpg" width="500px" height="300px" alt="Lhr" />
</div>

<div class="item">
<img src="./../Style Library/Dejavu/images/LHR II.jpg" width="500px" height="300px" alt="Lhr 2" />
</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>
</div>
</div>
</div>
 
Image coming like this ( see width and height )
 

Answers (2)