how to allow my carousel slider image to be responsive - html

Question

I was trying to recreate a navbar/header/slider like this https://matchthemes.com/demohtml/dina/index.html
However, I have an issue with my carousel slider image. It looks fine when it is in webpage form, but when I shrink it to a mobile form, my image does not resize to the same as my carousel slider. Below is an image of what I mean.
mobile form
website form
This is my HTML for the carousel slider
<section class="container-fluid carouselcontainer">
<section 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 -->
<section class="carousel-inner">
<section class="item active">
<img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
</section>
</section>
<!-- 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>
</section>
</section>
This is my CSS. It's only 1 line. It is the only way I know to resize the carousel and the image
.carousel-inner {
width:100%;
height:830px;
}

Answer 1

You can use image in background with "background-image:url('..');" like
<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>
You need to some CSS in item class to adjust images what you want.
Example
.item{
width: 100%;
height: 100%;
background-repeat: no-repeat ;
background-size: cover ;
background-position: center ;
}

Answer 2

How about letting a browser pic the best image?
img {
max-width: 100%;
}
and read the following link
https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html
and use "img srcset"

Answer 3

This is Your Solution
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
You Can Edit or Preview Code Here Also Code Link

Answer 4

Try to make the width of your carousel image 100%
.carousel-inner .item img {
width: 100%;
}