How to set images in div size

Question

I'm working in movie production website and trying to display movies images in equal size but i have different sizes of images and i need to place image in div like full size i.e all four corners should be zoomed in. Please help.

MY CODE

<div id="movies-images"> <img class="img-fluid" src="images/a4.jpg"> </div>

CSS :

#movies-images{ width: 100%; height: 100%; }

I want images to equal in width and height.

Answer 1

Try this:

.img-box {
  display: flex;
  justify-content: space-between;
}
.movies-images {
  width: 33%;
  height: auto;
}
.movies-images img {
  width: 100%;
  display: block;
}

<div class="img-box">
    <div class="movies-images">
        <img class="img-fluid" src="http://lorempixel.com/800/600/">
    </div>
    <div class="movies-images">
        <img class="img-fluid" src="http://lorempixel.com/800/600/">
    </div>
    <div class="movies-images">
        <img class="img-fluid" src="http://lorempixel.com/800/600/">
    </div>
</div>