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 .


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>--%>
<!-- 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 class="item">
<img src="./../SiteAssets/ImageSlider/slide1.jpg" width="300px" height="200px" alt="Los Angeles">
<%-- <div class="item">
<img src="./../SiteAssets/ImageSlider/slide1.jpg" width="500px" height="300px" alt="Los Angeles">
<div class="item">
<img src="./../Style Library/Dejavu/images/LHR I.jpg" width="500px" height="300px" alt="Lhr" />

<div class="item">
<img src="./../Style Library/Dejavu/images/LHR II.jpg" width="500px" height="300px" alt="Lhr 2" />
<!-- 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 class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
Image coming like this ( see width and height )

Brought to you by:

Answers (2)