如何将图像设置为 div 大小

Question

我在电影制作网站工作，并试图以相同大小显示电影图像，但我有不同大小的图像，我需要将图像像全尺寸一样放在 div 中，即所有四个角都应该放大。请帮助。

我的代码

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

CSS：

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

我希望图像的宽度和高度相等。

Answer 1

试试这个：

.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>