Resolution and aspect ratio image sizes for bootstrap carousel - html

Question

I want my bootstrap carousel to take up the whole page of the user entering my site. However, with aspect ratios and resolution differences between monitors, I was wondering what is the best way to go about this?
I think I should first choose images of relatively the same size to start off. This is what I have so far.
css:
img {
background-size: cover;
background-position: center center;
background-repeat:no-repeat;
width: 100%;
height: 100%;
object-fit: cover;
}
What if the images I am using have a super high resolution. Will this not fit on the user's page?

Answer 1

I believe this will work , but I can't be sure .
but you can see it here :
http://jsfiddle.net/heyallanmoreno/7tdvu/4/
<section class="block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://lorempixel.com/1024/750" alt="Slide1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1024/750" alt="Slide2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1024/750" alt="Slide3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</section>
and ,
.carousel .item {
width: 100%; /*slider width*/
max-height: 600px; /*slider height*/
}
.carousel .item img {
width: 100%; /*img width*/
}
/*add some makeup*/
.carousel .carousel-control {
background: none;
border: none;
top: 50%;
}
/*full width container*/
#media (max-width: 767px) {
.block {
margin-left: -20px;
margin-right: -20px;
}
}
Hope this will help you.