如何将图像设置为 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>

如何将图像设置为 div 大小

How to set images in div size

html

css

height

width